CSS3 Tranform 3D 的应用
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 上，其旋转效果如下：
参考：
注意
转载、引用，但请标明作者和原文地址
