css3——3D动画、transform-style：preserve-3d、transform：perspective()、perspective-origin

1. transform-style：preserve-3d，该属性设置在父级元素中，它的子级元素具有3d效果

注意：设置了该属性，就不能防止子级元素溢出，即不能设置overf：hidden属性；如果设置了overflow：hidden，那么transform-style：preserve-3d就无效。

2. transform：perspective；景深，观察者到物体的距离；单位：px，比如：transform：perspective(500px);

英语：perspective：透镜，望远镜;观点，看法;远景，景色;洞察力

（1）该属性设置在父级元素中，对于子级元素而言，都只有一个公共的视角

比如：该例子中，父级设置3d属性，设置景深；三个子级元素的旋转角度都是 60度，但是视觉上却不一样，因为观察者的视角是某个特定位置。该视角下去看三个子级，

    <style>.wrapper{position: absolute;top: 100px;left: 100px;width: 100px;height: 300px;border: 1px solid black;transform-style: preserve-3d;transform: perspective(500px);}.wrapper div:nth-of-type(1){width: 100px;height: 100px;background: red;transform: rotateX(60deg);}.wrapper div:nth-of-type(2){width: 100px;height: 100px;background: blue;transform: rotateX(60deg);}.wrapper div:nth-of-type(3){width: 100px;height: 100px;background: green;transform: rotateX(60deg);}</style>
</head>
<body><div class="wrapper"><div></div><div></div><div></div></div>
</body>

注意：保留3d+景深+旋转 == 才会看到3d效果

（2）如果transform：perspective设置在子级元素中，对每个子级进行单独的视角设置

注意：transform属性要复合写，不然会覆盖无效。

而且，属性有先后：transform: perspective(500px) rotateX(60deg);

比如：三个子级的景深：transform: perspective(500px) rotateX(60deg);

结果：

如果其中一个的景深是：transform: perspective(100px) rotateX(60deg);

结果：景深太小，视角距离物体越近，那么看着物体会变大。

3. perspective-origin：深源，也是视角的位置，确定了视角在水平面的位置；景深确定的是：垂直高度

这样才能确定视角在空间中的位置。父级属性，默认情况下，在父级容器中心 50% 50%

对于 Chrome 和 Safari 用户: 为了更好地理解perspective-Origin属性，请查看查看实例.

因为视角位置的改变，看到的物体样子也发生变化，物体的移动效果，直接看实例

注意：transform：perspective()；和 perspective-origin；两个属性都是设置在父级中，才有效果，是两个关联的属性

x	父级盒子宽的相对值，默认50%。值：left、center、right；length；%
y	父级盒子高的相对值，默认50%。值：top、center、bottom；length； %

4. backface-visibility：visible(可见) | hidden(隐藏)

背面是否可以看见

5. 转轴：css3属性的空间直角坐标系是相对每一个物体本身的，即任何一个物体都有自己的空间直角坐标系。当然如果父级物体沿着自己的轴转动，就会出现子级相对父级的轴旋转的效果。

练习：写一个旋转木马

css3——3D动画、transform-style：preserve-3d、transform：perspective()、perspective-origin相关推荐

[css] css 3d 动画,跟随鼠标移动做球形旋转
点击在线查看动画效果代码如下 <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
3D动画效果实现步骤
3D动画效果实现步骤 3D呈现(transform-style) 3D元素构建是指某个图形是由多个元素构成的,可以给这些元素的父元素设置transform-style: preserve-3d来使其变 ...
系统学习iOS动画之六：3D动画
本文是我学习<iOS Animations by Tutorials> 笔记中的一篇. 文中详细代码都放在我的Github上 andyRon/LearniOSAnimations. 到目前 ...
CSS3的动画及3D转换（animation、transform、rotate3d 、perspective等）【总结】
目录 1. 动画 ① 创建 ② 属性 ③ 关键帧 2. 3D ① transform转换 ② rotate3d ③ translate3d ④ perspective ⑤ transform-styl ...
html52D转换3D,CSS3 Transform 2D和3D转换
1.2 缩放语法transform : scale(x,y); -webkit-transform : scale(x,y); 根据倍数来缩放,取决于宽度(X轴)和高度(Y轴)的参数:也可以用一个参 ...
网页HTML5制作flex布局骰子,css3 flex布局结合transform生成一个3D骰子
1 Flex 布局首先聊聊Flex 布局,Flex 布局又称"弹性布局",任何容器都可以指定为Flex布局,设置Flex布局会使得子元素的float.clear.vertical ...
CSS3与页面布局学习笔记（六）——CSS3新特性（阴影、动画、渐变、变形( transform)、透明、伪元素等）...
一.阴影 1.1.文字阴影 text-shadow <length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的 ...
css3-13 css3的3D动画如何实现
css3-13 css3的3D动画如何实现一.总结一句话总结:这里是transform+setInterval实现.transform属性里面的rotate属性值变成rotateX或rotateY ...
浅谈css3的3D动画效果并制作一个简单的旋转照片墙
各位读者大家好,我是一只小菜鸟.目前正在学习web前端方面的相关知识.,这也是小菜鸟第一次写博客.写的有哪里不对的地方欢迎各位指正. 本篇文章内容就是利用简单的HTML布局再加上CSS3的3D转换和动 ...

css3——3D动画、transform-style：preserve-3d、transform：perspective()、perspective-origin

css3——3D动画、transform-style：preserve-3d、transform：perspective()、perspective-origin相关推荐

最新文章

热门文章