當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css3动画3D

發(fā)布時間：2023/12/20 编程问答 19 豆豆

生活随笔收集整理的這篇文章主要介紹了 css3动画3D 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

3D變形：平移、旋轉(zhuǎn)、縮放

3d坐標(biāo)軸

3D立體空間的3根軸線

x軸：水平，向右為正，向左為負(fù)
y軸：垂直，向下為正，向上為負(fù)
z軸：垂直于屏幕，向外為正，向內(nèi)為負(fù)

1）3D必備屬性

transform-style: preserve-3d; 創(chuàng)建3d空間
什么時候搭建3d舞臺？
- 父元素有3D變形，子元素也有3D變形
perspective屬性：景深（透視），屬性值為透視點(diǎn)到元素的距離，近大遠(yuǎn)小；也可以讓網(wǎng)頁產(chǎn)生3D效果，單位像素
preserve-3d，如果搭配overflow: hidden/scroll/auto使用，相當(dāng)于2D效果

transform-style屬性和perspective屬性放在父元素中,有時候perspective屬性放在body中

2) 位移

transform: translateZ(z); 沿著z軸方向位移
transform: translate3d(x,y,z) 沿著x、y、z軸方向位移

z指的是 z 軸的向量位移長度。當(dāng)其值為負(fù)值時，元素在 Z 軸越移越遠(yuǎn)，導(dǎo)致元素變小。反之當(dāng)值為正值時，

其在 Z 軸越移越近，導(dǎo)致元素變得較大。

<!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;/* 景深效果，創(chuàng)建網(wǎng)頁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) 旋轉(zhuǎn)

transform: rotateX(a); 沿著x軸方向旋轉(zhuǎn)
a 指的是一個旋轉(zhuǎn)角度值，如果為正值，元素圍繞X軸順時針旋轉(zhuǎn)；反之，如果為負(fù)值，元素圍繞X軸逆時針旋轉(zhuǎn)。
transform: rotateY(a); 沿著y軸方向旋轉(zhuǎn)
a 指的是一個旋轉(zhuǎn)角度值，如果為正值，元素圍繞Y軸順時針旋轉(zhuǎn)；反之，如果為負(fù)值，元素圍繞Y軸逆時針旋轉(zhuǎn)。
transform: rotateZ(a); 沿著Z軸方向旋轉(zhuǎn)
a 指的是一個旋轉(zhuǎn)角度值，如果為正值，元素圍繞 Z 軸順時針旋轉(zhuǎn)；反之，如果為負(fù)值，元素圍繞 Z 軸逆時針

旋轉(zhuǎn)。
transform: rotate3d(x,y,z,angle);
參數(shù)：

x：是一個 0 到１之間的數(shù)值，主要用來描述元素圍繞 X 軸旋轉(zhuǎn)的矢量值。

y：是一個 0 到１之間的數(shù)值，主要用來描述元素圍繞 Y 軸旋轉(zhuǎn)的矢量值。

z：是一個 0 到１之間的數(shù)值，主要用來描述元素圍繞 Z 軸旋轉(zhuǎn)的矢量值。

angle：一個角度值，指定在 3D 空間旋轉(zhuǎn)角度，正值順時針旋轉(zhuǎn)，反之元素逆時。

1、兩個值為零，定義X,Y,Z軸旋轉(zhuǎn) rotate3d(1,0,0,angle) ? x軸旋轉(zhuǎn) rotate3d(0,1,0,angle) ? y軸旋轉(zhuǎn) rotate3d(0,0,1,angle) ? z軸旋 ? /* 沿著x軸方向旋轉(zhuǎn) */ transform: rotateX(-45deg); transform: rotate3d(1,0,0,-45deg); ? /* 沿著y軸方向旋轉(zhuǎn) */ transform: rotateY(-45deg); transform: rotate3d(0,1,0,-45deg); ? /* 沿著z軸方向旋轉(zhuǎn) */ transform: rotateZ(-45deg); transform: rotate3d(0,0,1,-45deg); ? ? 2、兩個值不為零，定義多軸旋轉(zhuǎn) 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、三個值不為零，定義多軸旋轉(zhuǎn) ? .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軸方向縮放
取值
- 默認(rèn)值為1
- 使用0~1之間的值縮小元素使用超過1的值放大元素
注意：scaleZ單獨(dú)使用看不到效果，需要配合其他變換屬性一起使用

總結(jié)

以上是生活随笔為你收集整理的css3动画3D的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

动画

编程问答

css3动画3D

3D變形：平移、旋轉(zhuǎn)、縮放

總結(jié)

3D變形：平移、旋轉(zhuǎn)、縮放