生活随笔
收集整理的這篇文章主要介紹了
css3动画3D
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
3D變形：平移、旋轉、縮放
3d坐標軸
3D立體空間的3根軸線
-
x軸：水平，向右為正，向左為負
-
y軸：垂直，向下為正，向上為負
-
z軸：垂直于屏幕，向外為正，向內為負
1）3D必備屬性
-
transform-style: preserve-3d; 創建3d空間
-
什么時候搭建3d舞臺？
-
perspective屬性：景深（透視），屬性值為透視點到元素的距離，近大遠小；也可以讓網頁產生3D效果，單位像素
-
preserve-3d， 如果搭配overflow: hidden/scroll/auto使用，相當于2D效果
transform-style屬性和perspective屬性放在父元素中,有時候perspective屬性放在body中
2) 位移
-
transform: translateZ(z); 沿著z軸方向位移
-
transform: translate3d(x,y,z) 沿著x、y、z軸方向位移
z指的是 z 軸的向量位移長度。當其值為負值時，元素在 Z 軸越移越遠，導致元素變小。反之當值為正值時，
其在 Z 軸越移越近，導致元素變得較大。
<!DOCTYPE html>
<html lang="en">
?
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {width: 400px;height: 400px;border: 2px solid tomato;margin: 100px auto;/* 景深效果，創建網頁3d效果 */perspective: 1000px;}
?.father .son {width: 200px;height: 200px;background-color: tomato;margin: 100px auto;
?}
?.father:hover .son {transform: translateZ(200px);transform: translateZ(-200px);transform: translateX(100px) translateY(50px) translateZ(200px);transform: translate3d(100px, 50px, 200px);
?}</style>
</head>
?
<body><div class="father"><div class="son"></div></div>
</body>
?
</html>
3) 旋轉
-
transform: rotateX(a); 沿著x軸方向旋轉
-
a 指的是一個旋轉角度值，如果為正值，元素圍繞X軸順時針旋轉；反之，如果為負值，元素圍繞X軸逆時針旋轉。
-
transform: rotateY(a); 沿著y軸方向旋轉
-
a 指的是一個旋轉角度值，如果為正值，元素圍繞Y軸順時針旋轉；反之，如果為負值，元素圍繞Y軸逆時針旋轉。
-
transform: rotateZ(a); 沿著Z軸方向旋轉
-
a 指的是一個旋轉角度值，如果為正值，元素圍繞 Z 軸順時針旋轉；反之，如果為負值，元素圍繞 Z 軸逆時針
旋轉。
-
transform: rotate3d(x,y,z,angle);
-
參數：
x：是一個 0 到１之間的數值，主要用來描述元素圍繞 X 軸旋轉的矢量值。
y：是一個 0 到１之間的數值，主要用來描述元素圍繞 Y 軸旋轉的矢量值。
z：是一個 0 到１之間的數值，主要用來描述元素圍繞 Z 軸旋轉的矢量值。
angle：一個角度值，指定在 3D 空間旋轉角度，正值順時針旋轉，反之元素逆時。
1、兩個值為零，定義X,Y,Z軸旋轉
rotate3d(1,0,0,angle) ? x軸旋轉
rotate3d(0,1,0,angle) ? y軸旋轉
rotate3d(0,0,1,angle) ? z軸旋
?
/* 沿著x軸方向旋轉 */
transform: rotateX(-45deg);
transform: rotate3d(1,0,0,-45deg);
?
/* 沿著y軸方向旋轉 */
transform: rotateY(-45deg);
transform: rotate3d(0,1,0,-45deg);
?
/* 沿著z軸方向旋轉 */
transform: rotateZ(-45deg);
transform: rotate3d(0,0,1,-45deg);
?
?
2、兩個值不為零，定義多軸旋轉
rotate3d(1,0.5,0,30deg)
?
x 1*30 ? 30deg
?
y 0.5*30 ?15deg
?
z 0*0 ? ? 0deg
?
.box5:hover img {/* z */transform: rotate3d(.5, 1, 0, 60deg);/* x:0.5*60=30degy:1*60=60degz:0*60=0deg
?*/
}
3、三個值不為零，定義多軸旋轉
?
.box6:hover img {/* z */transform: rotate3d(.5, 1, 1, 60deg);/* x:0.5*60=30degy:1*60=60degz:1*60=60deg
?*/
}
4）縮放
-
transform: scaleZ() 沿著z軸方向縮放
-
transform: scale3d() 沿著x、y、z軸方向縮放
-
取值
-
注意：scaleZ單獨使用看不到效果，需要配合其他變換屬性一起使用
總結
以上是生活随笔為你收集整理的css3动画3D的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
