當(dāng)前位置：首頁(yè) > 前端技术 > CSS >内容正文

CSS

044_CSS33D转换

發(fā)布時(shí)間：2025/4/17 CSS 80 豆豆

生活随笔收集整理的這篇文章主要介紹了 044_CSS33D转换小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1. CSS3 transform屬性

1.1. transform屬性向元素應(yīng)用2D或3D轉(zhuǎn)換。該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。

1.2. 默認(rèn)值

1.3. 可能值

2. rotate3d(x,y,z,angle)方法

2.1. rotate3d(x,y,z,angle)定義3D旋轉(zhuǎn)。

2.2. x: 是一個(gè)0到１之間的數(shù)值, 主要用來(lái)描述元素圍繞X軸旋轉(zhuǎn)的矢量值;一般我們寫0或者1, 0代表X軸方向不旋轉(zhuǎn), 1代表X軸方向旋轉(zhuǎn)。

2.3. y: 是一個(gè)0到１之間的數(shù)值, 主要用來(lái)描述元素圍繞Y軸旋轉(zhuǎn)的矢量值;一般我們寫0或者1, 0代表Y軸方向不旋轉(zhuǎn), 1代表Y軸方向旋轉(zhuǎn)。

2.4. z: 是一個(gè)0到１之間的數(shù)值, 主要用來(lái)描述元素圍繞Z軸旋轉(zhuǎn)的矢量值;一般我們寫0或者1, 0代表Z軸方向不旋轉(zhuǎn), 1代表Z軸方向旋轉(zhuǎn)。

2.5. angle: 是一個(gè)角度值, 主要用來(lái)指定元素在3D空間旋轉(zhuǎn)的角度, 如果其值為正值表示元素順時(shí)針旋轉(zhuǎn), 為負(fù)值表示元素逆時(shí)針旋轉(zhuǎn)。

3. 例子

3.1. 代碼

<!DOCTYPE html> <html><head><title>CSS3 3D旋轉(zhuǎn)</title><meta charset="utf-8" /><style type="text/css">div {width: 90px;height: 70px;border: 1px solid #000000;border-radius: 5px;margin: 30px 20px;padding: 10px;float: left; background: red;color: white;font-weight: bold;box-sizing: border-box;}</style></head><body><div onmouseover="rotate()" id="rotate">2D rotate</div><div onmouseover="rotateX()" id="rotateX">3D rotateX</div><div onmouseover="rotateY()" id="rotateY">3D rotateY</div><div onmouseover="rotateZ()" id="rotateZ">3D rotateZ</div><div onmouseover="rotate3d()" id="rotate3d">3D rotate3d</div><script type="text/javascript">var n = 0, x = 0, y = 0, z = 0, r3d = 0, rotateInterval, rotateXInterval, rotateYInterval, rotateZInterval, rotate3dInterval;function rotate() {clearInterval(rotateInterval);rotateInterval = setInterval("startRotate()", 10);}function startRotate(){document.getElementById("rotate").style.transform = "rotate(" + ++n + "deg)";if (n == 180 || n == 360) {clearInterval(rotateInterval);}if (n >= 360) {n = 0;}}function rotateX() {clearInterval(rotateXInterval);rotateXInterval = setInterval("startRotateX()", 10);}function startRotateX(){document.getElementById("rotateX").style.transform = "rotateX(" + ++x + "deg)";if (x == 180 || x == 360) {clearInterval(rotateXInterval);}if (x >= 360) {x = 0;}}function rotateY() {clearInterval(rotateYInterval);rotateYInterval = setInterval("startRotateY()", 10);}function startRotateY(){document.getElementById("rotateY").style.transform = "rotateY(" + ++y + "deg)";if (y == 180 || y == 360) {clearInterval(rotateYInterval);}if (y >= 360) {y = 0;}}function rotateZ() {clearInterval(rotateZInterval);rotateZInterval = setInterval("startRotateZ()", 10);}function startRotateZ(){document.getElementById("rotateZ").style.transform = "rotateZ(" + ++z + "deg)";if (z == 180 || z == 360) {clearInterval(rotateZInterval);}if (z >= 360) {z = 0;}}function rotate3d() {clearInterval(rotate3dInterval);rotate3dInterval = setInterval("startRotate3d()", 10);}function startRotate3d(){document.getElementById("rotate3d").style.transform = "rotate3d(1, 1, 1, " + ++r3d + "deg)";if (r3d == 180 || r3d == 360) {clearInterval(rotate3dInterval);}if (r3d >= 360) {r3d = 0;}}</script></body> </html>

3.2. 效果圖

總結(jié)

以上是生活随笔為你收集整理的044_CSS33D转换的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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

_CSS33D