CSS3 Tranform 3D 的应用
一、perspective 属性
1. 作用：
设置元素被查看位置的视图，类似于眼睛到屏幕的距离，一般跟 perspective-origin 共同作用在一个父元素上
属性值 = 屏幕分辩率 * 屏幕和我们眼睛的距离
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身
perspective 属性只影响 3D 转换元素
2. 作用范围
- 舞台效果： 作用在 transform 属性元素的父元素上，里面的元素都会受到改属性的影响，而且显示的效果跟子元素在父元素的位置有关系。
perspective: 200px
- 单个元素：和 transform 属性 共同作用在同一元素中：
transform: perspective(500px) rotateY(45deg);
二、transform 属性
1. 属性：
- translateZ: 元素向着它朝的方向（也就是其经过rotate之后） “走出去” 的距离
- rotateX( xx deg)
- rotateY( xx deg)
- rotateZ( xx deg)
- ...
三、perspective-origin 属性
1. 作用
设置 3D 元素的基点位置（也就是我们眼睛看的位置），默认就是所看舞台或元素的中心
perspective-origin: 25% 75%;四、transform-style
1. 作用
利用该属性可以使被转换的子元素（不是后代）保留其 3D 转换：
transform-style: preserve-3d / flat五、backface-visibility
1. 作用
该属性定义当元素不面向屏幕时（前面有3d元素挡住时）是否可见，可以想象各个面连成一个实体的形状，后面的面会被前面的面挡住看不见。
backface-visibility : hidden / visible;- 为每个面设置 backface-visibility: visible，默认值就是 visible
- 为每个面设置 backface-visibility: hidden
?
六、例子
<body> ???<div class="center showbf"> ???????<div class="cube"> ???????<div class="face front">1</div> ???????<div class="face back">2</div> ???????<div class="face right">3</div> ???????<div class="face left">4</div> ???????<div class="face top">5</div> ???????<div class="face bottom">6</div> ???????</div> ???<div></body>.hidebf div { ???backface-visibility: hidden; ???-webkit-backface-visibility: hidden;}.showbf div { ???backface-visibility: visible; ???-webkit-backface-visibility: visible;}.center{ ???margin: auto; ???margin-top: 100px; ???width: 80%; ???height: 300px; ???border: 1px solid; ????perspective: 200px; ?????????/* prespective 和 perspective-origin 一般一起在外层元素上使用 */ ???perspective-origin: 50% 5%; ?/* **** */}.cube { ???width: 100px; ???height: 100px; ???margin: auto; ???margin-top: 100px; ???transform-style: preserve-3d; ??/* 让多个子元素之间的 3D 关系像我们想象一样呈现 */ ???transition: 1s ease; ???transform: rotateY(0deg); ?/* 改变角度看 */}.face { ???display: block; ???position: absolute; ???width: 100px; ???height: 100px; ???border: none; ???line-height: 100px; ???font-family: sans-serif; ???font-size: 60px; ???color: white; ???text-align: center;}/* Define each face based on direction */.front { ???background: rgba(0, 0, 0, 0.3); ???transform: translateZ(80px);}.back { ???background: rgba(0, 255, 0, 1); ???color: black; ???transform: rotateY(180deg) translateZ(80px);}.right { ???background: rgba(196, 0, 0, 0.7); ???transform: rotateY(90deg) translateZ(80px);}.left { ???background: rgba(0, 0, 196, 0.7); ???transform: rotateY(-90deg) translateZ(80px);}.top { ???background: rgba(196, 196, 0, 0.7); ???transform: rotateX(90deg) translateZ(80px);}.bottom { ???background: rgba(196, 0, 196, 0.7); ???transform: rotateX(-90deg) translateZ(80px);}上面如果把 div class="cube" 的元素旋转 rotateY(30deg) 其效果如下：
但是如果把 prespective 从 cube 的父元素移到 cube 上，其旋转效果如下：
参考：
好吧，CSS3 3D transform变换，不过如此！
注意
转载、引用，但请标明作者和原文地址