當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css3动画2D|3D

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

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

一、css3的transform屬性

1、2D變形：平移、旋轉(zhuǎn)、縮放、傾斜

1) transform: translate()平移

transform: translate(x,y) 沿著x軸和y軸移動
transform: translateX(x) 沿著x軸移動
transform: translateY(y) 沿著y軸移動

取值:

px
百分比（強調(diào)相對于元素本身計算）
說明：允許負值，正值默認向右向下，負值向左向上

水平向右為正值，垂直方向向下正值

/* 沿著水平方向位移 */ 當為一個值的時候，只沿著水平方向位移 transform: translate(50px);

2) transform: rotate(ndeg) 旋轉(zhuǎn)

語法
transform：rotate(deg);沿著中心點旋轉(zhuǎn)，默認值
transform: rotateX(deg);沿著X軸旋轉(zhuǎn)
transform: rotateY(deg);沿著Y軸旋轉(zhuǎn)

單位：deg ? 當角度值為正數(shù)時，元素沿著順時針方向旋轉(zhuǎn) ? 當角度值為負數(shù)時，元素沿著逆時針方向旋轉(zhuǎn)

? .box1 {background-color: red;transform: rotate(45deg);}.box2 {background-color: blue;transform: rotate(-45deg);}.box3:hover {transform: rotateX(60deg);}.box4:hover {transform: rotateY(60deg);}

3）transform: scale() 縮放

transform: scale(x,y) 沿著x軸和y軸縮放
transform: scaleX(x) 沿著x軸縮放
transform: scaleY(y) 沿著y軸縮放

取值范圍0~1之間表示縮小，1表示正常大小，1以上表示放大，默認值為1 取值為負值表示先翻轉(zhuǎn)后縮放

為一個值的時候，沿著水平方向和垂直方向等比例縮放

transform: scale(1.5);/* 沿著水平方向和垂直方向都放大1.5倍，等比例縮放 */ transform: scale(-1.5);/* 先翻轉(zhuǎn)，然后沿著水平方向和垂直方向都放大1.5倍 */

4）transform: skew() 傾斜

transform: skew(x,y) 沿著x軸和y軸傾斜
transform: skewX(x) 沿著x軸傾斜
transform: skewY(y) 沿著y軸傾斜

單位deg(角度) 正值，向左上角和右下角傾斜；負值，向右上角和左下角傾斜

為一個值的時候，只沿著水平方向傾斜

/* 為一個值的時候，只沿著水平方向位移 */.box1:hover {transform: skew(45deg);}/* skew(30deg,45deg) 圍繞 X 軸把元素翻轉(zhuǎn) 30 度，圍繞 Y 軸翻轉(zhuǎn) 45 度 */.box2:hover {background-color: tomato;transform: skew(30deg, 45deg);} ?.box3:hover {transform: skewX(-45deg);} ?.box4:hover {transform: skewY(45deg); ?}.box5:hover {transform: skewY(-45deg);}

5）transform-origin屬性設(shè)置元素的基點位置

transform-origin: 水平方向垂直方向;
設(shè)置元素的基點位置，設(shè)置圍繞哪個點進行變化
取值

百分比

關(guān)鍵字

水平：left center right ? 垂直：top center bottom

說明：兩個空格隔開的值，分別表示x,y軸的原點一個值時，另一個值默認center
可為負數(shù)

必須與transform屬性配合使用

<!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>.wrap {width: 300px;height: 300px;background-color: plum;margin: 100px auto;} ?.wrap .box1 {width: 100px;height: 100px;background-color: blue;margin: 0 auto;transition: .5s;transform-origin: right top;transform-origin: bottom;transform-origin: 100px 200px;transform-origin: 100px;transform-origin: 50% 50%;transform-origin: -50% -100%;} ?.wrap:hover .box1 {transform: rotate(135deg);}</style> </head> ? <body><div class="wrap"><div class="box1">1</div></div> </body> ? </html>

5）旋轉(zhuǎn)，位移，縮放，傾斜的復(fù)合寫法

屬性之間用空格隔開，先位移再旋轉(zhuǎn) ?.wrap:hover .box1 {transform: rotate(135deg);transform: translate(50px);transform: scale(1.5);/* 復(fù)合先位移再旋轉(zhuǎn)*/transform: translate(100px) rotate(120deg) scale(1.5);}

總結(jié)：

名稱語法取值單位其他

位移	transform:translate();	一個值（沿著水平方向位移），兩個值	像素px	transform: translateX(); transform: translateY()
旋轉(zhuǎn)	transform: rotate();	一個值	deg角度
縮放	transform: scale();	一個值（等比例縮放）、兩個值	沒有單位	transform: scaleX(); transform: scaleY()
傾斜	transform: skew();	一個值（沿著水平方向傾斜）、兩個值	deg角度	transform: skewX(); transform: skewY();

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

3d坐標軸

3D立體空間的3根軸線

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

1）3D必備屬性

transform-style: preserve-3d; 創(chuàng)建3d空間
什么時候搭建3d舞臺？
- 父元素有3D變形，子元素也有3D變形
perspective屬性：景深（透視），屬性值為透視點到元素的距離，近大遠小；也可以讓網(wǎng)頁產(chǎn)生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 軸越移越遠，導(dǎo)致元素變小。反之當值為正值時，

其在 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)；反之，如果為負值，元素圍繞X軸逆時針旋轉(zhuǎn)。
transform: rotateY(a); 沿著y軸方向旋轉(zhuǎn)
a 指的是一個旋轉(zhuǎn)角度值，如果為正值，元素圍繞Y軸順時針旋轉(zhuǎn)；反之，如果為負值，元素圍繞Y軸逆時針旋轉(zhuǎn)。
transform: rotateZ(a); 沿著Z軸方向旋轉(zhuǎn)
a 指的是一個旋轉(zhuǎn)角度值，如果為正值，元素圍繞 Z 軸順時針旋轉(zhuǎn)；反之，如果為負值，元素圍繞 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）縮放