一、perspective （chrome、ie10+等）
用法：用在父元素上，透视效果
perspective：none | <length>
默认值：none
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>perspective</title>
<style>
.father {
width: 200px;
height: 200px;
margin: 50px auto;
border: 1px solid #000;
-webkit-perspective: 110px;
perspective: 110px;
}
.son {
width: 180px;
height: 120px;
margin: 40px 10px;
background-color: #ccc;
-webkit-transform: rotatex(45deg);
transform: rotatex(45deg);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
例如：立方体就是利用perspective实现的。(transform值:"rotate"、"translate"的顺序会改变当前平面所在坐标轴，所以顺序不同，效果也不同)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>3d</title>
<style>
li {
list-style-type: none;
}
.father {
position: relative;
margin: 100px 500px;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.son {
position: absolute;
top:0;
left:0;
width: 200px;
height: 200px;
line-height: 200px;
margin: 40px 10px;
border: 2px solid #C09;
text-align: center;
font-size: 100px;
}
.son:nth-child(1) {
transform: translateZ(100px);
-webkit-transform: translateZ(100px);
}
.son:nth-child(2) {
transform: rotateY(90deg) translateZ(100px);
-webkit-transform: rotateY(90deg) translateZ(100px);
}
.son:nth-child(3) {
transform: rotateY(180deg) translateZ(100px);
-webkit-transform: rotateY(180deg) translateZ(100px);
}
.son:nth-child(4) {
transform: rotateY(-90deg) translateZ(100px);
-webkit-transform: rotateY(-90deg) translateZ(100px);
}
.son:nth-child(5) {
transform: rotateX(90deg) translateZ(100px);
-webkit-transform: rotateX(90deg) translateZ(100px);
}
.son:nth-child(6) {
transform: rotateX(-90deg) translateZ(100px);
-webkit-transform: rotateX(-90deg) translateZ(100px);
}
</style>
</head>
<body>
<ul class="father">
<li class="son">1</li>
<li class="son">2</li>
<li class="son">3</li>
<li class="son">4</li>
<li class="son">5</li>
<li class="son">6</li>
</ul>
</body>
</html>
二、perspective-origin （chrome、ie10+等）
用法：用在父元素上，指定透视点的位置。
perspective-origin：[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]
上面的father代码修改：
.father {
position: relative;
margin: 100px 500px;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-perspective-origin: 90% bottom;
perspective-origin: 90% bottom;
}
效果明显与上图视角变化了
三、transform-style （chrome等、不支持ie）
用法：用在父元素上，指定子元素变换时（比如立方体旋转动起来时）始终位于三维空间内。
transform-style：flat | preserve-3d
默认值：flat
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>preserve-3d</title>
<style>
li {
list-style-type: none;
}
.father-wrap {
position: relative;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.father {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
animation: rotaY 5s infinite linear;
-webkit-animation: rotaY 5s infinite linear;
}
.son {
position: absolute;
top:0;
left:0;
width: 200px;
height: 200px;
line-height: 200px;
margin: 40px 10px;
border: 2px solid #C09;
text-align: center;
font-size: 100px;
}
.son:nth-child(1) {
transform: translateZ(100px);
-webkit-transform: translateZ(100px);
}
.son:nth-child(2) {
transform: rotateY(90deg) translateZ(100px);
-webkit-transform: rotateY(90deg) translateZ(100px);
}
.son:nth-child(3) {
transform: rotateY(180deg) translateZ(100px);
-webkit-transform: rotateY(180deg) translateZ(100px);
}
.son:nth-child(4) {
transform: rotateY(-90deg) translateZ(100px);
-webkit-transform: rotateY(-90deg) translateZ(100px);
}
.son:nth-child(5) {
transform: rotateX(90deg) translateZ(100px);
-webkit-transform: rotateX(90deg) translateZ(100px);
}
.son:nth-child(6) {
transform: rotateX(-90deg) translateZ(100px);
-webkit-transform: rotateX(-90deg) translateZ(100px);
}
@keyframes rotaY{
0% {
-webkit-transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(-360deg);
}
}
@-webkit-keyframes rotaY{
0% {
-webkit-transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(-360deg);
}
}
</style>
</head>
<body>
<div class="father-wrap">
<ul class="father">
<li class="son">1</li>
<li class="son">2</li>
<li class="son">3</li>
<li class="son">4</li>
<li class="son">5</li>
<li class="son">6</li>
</ul>
</div>
</body>
</html>
鼠标移动到立方体上时：
.father {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: transform 2s;
-webkit-transition: transform 2s;
/*animation: rotaY 5s infinite linear;
-webkit-animation: rotaY 5s infinite linear;*/
}
.father:hover {
transform: rotateX(360deg) rotateY(360deg);
-webkit-transform: rotateX(360deg) rotateY(360deg);
}
通过上面的例子，perspective 和 transform-style: preserve-3d 明显的区别是前者是静态的立体效果，后者是动态始终维持的立体效果。
四、transform-origin （chrome、ie10+等）
用法：用在转换元素上，指定当前元素转换的原点。例如物体曲线运动时的原点（圆心）等等。
transform-origin：[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]
默认值：50% 50%，效果等同于center center
例如：下面的曲线上的小图标沿曲线旋转运动，一部分代码如下，关键是transform-origin的运用
<div class="ring-box">
<img class="ring-item ring-item0" src="login/flag.png" alt=""/>
<div class="ring-item ring-item1">
<img src="login/ring-05.png" alt=""/>
<img src="login/ring-06.png" alt=""/>
</div>
<div class="ring-item ring-item2">
<img src="login/ring-01.png" alt=""/>
<img src="login/ring-02.png" alt=""/>
</div>
<div class="ring-item ring-item3">
<img src="login/ring-03.png" alt=""/>
<img src="login/ring-04.png" alt=""/>
</div>
<div class="ring-item ring-item4">
<!--<img src="login/ring-arrow-left.png" alt=""/>-->
<img src="login/ring-arrow.png" alt=""/>
</div>
</div>
.ring-box .ring-item1 img:nth-of-type(1) {
position: absolute;
top: 255px;
left: 560px;
transform-origin: -290px 94px 0;
-webkit-transform-origin: -290px 94px 0;
animation:rotate-120 5s linear infinite;
-webkit-animation:rotate-120 5s linear infinite; /* Safari 和 Chrome */
}
@-webkit-keyframes rotate-120{
0% {transform: rotate(0deg);-webkit-transform: rotate(0deg);opacity:1;}
100% {transform: rotate(-120deg) ;-webkit-transform: rotate(-120deg);opacity:0;}
}
@keyframes rotate-120{
0% {transform: rotate(0deg) ;-webkit-transform: rotate(0deg);opacity:1;}
100% {transform: rotate(-120deg) ;-webkit-transform: rotate(-120deg);opacity:0;}
}
效果：
五、backface-visibility （chrome、ie10+等）
用法：用在转换元素上，指定元素背面面向用户时是否可见。
backface-visibility：visible | hidden
默认值：visible
例如：在步骤三的旋转立方体代码中修改son，添加backface-visibility
.son {
position: absolute;
top:0;
left:0;
width: 200px;
height: 200px;
line-height: 200px;
margin: 40px 10px;
border: 2px solid #C09;
text-align: center;
font-size: 100px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
效果：
