transform ： CSS3中2D、3D變換屬性。詳細(xì)轉(zhuǎn)換內(nèi)容 ：

①translateX : 延X(jué)軸移動(dòng)n個(gè)單位（ em rem px %" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁(yè) > 營(yíng)銷(xiāo)資訊 > 網(wǎng)站運(yùn)營(yíng) > CSS3制作3D頁(yè)面

CSS3制作3D頁(yè)面

時(shí)間：2023-09-11 17:36:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-11 17:36:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

CSS3制作3D頁(yè)面：CSS3新增了幾個(gè)有關(guān)3D轉(zhuǎn)換屬性，本文主要介紹下CSS3的一些屬性變換，以及一些酷炫的3D動(dòng)效如何實(shí)現(xiàn).

詳細(xì)轉(zhuǎn)換內(nèi)容 ：

①translateX : 延X(jué)軸移動(dòng)n個(gè)單位（ em rem px %<%為變換元素寬度的百分比> ···）

②translateY : 延Y軸移動(dòng)n個(gè)單位（ em rem px %<%為變換元素寬度的百分比> ···）

③translateZ : 延Z軸移動(dòng)n個(gè)單位（ em rem px <該方向的值不可為%> ···）

①②合并屬性為2D，其屬性值為 translate（X , Y）

①②③合并屬性為3D，其屬性值為 translate3D（X , Y，Z）

④scaleX: 延X(jué)軸放大n倍

⑤scaleY: 延Y軸放大n倍

⑥scaleZ: 延Z軸放大n倍

④⑤合并屬性為2D，其屬性值為 scale（X , Y）

④⑤⑥合并屬性為2D，其屬性值為 scale3D（X , Y, Z）

⑦rotateX: 延X(jué)軸逆時(shí)針旋轉(zhuǎn)n°

⑧rotateY: 延Y軸逆時(shí)針旋轉(zhuǎn)n°

⑨rotateZ: 延Z軸逆時(shí)針旋轉(zhuǎn)n°

⑦⑧合并屬性為2D，其屬性值為 rotate（X , Y）

⑦⑧⑨合并屬性為2D，其屬性值為 rotate3D（X , Y, Z）

?skewX: 定義沿著 X 軸的 2D 傾斜轉(zhuǎn)換。skewX(x-angle)

?skewY:定義沿著 Y 軸的 2D 傾斜轉(zhuǎn)換。skewY(y-angle)

?skew:定義沿著 X 和 Y 軸的 2D 傾斜轉(zhuǎn)換。skew (x-angle,y-angle)

?matrix: 定義 2D 轉(zhuǎn)換，使用六個(gè)值的矩陣。參考2D矩陣轉(zhuǎn)換篇

?matrix3d：定義 3D 轉(zhuǎn)換，使用 16 個(gè)值的 4x4 矩陣。參考3D矩陣轉(zhuǎn)換篇

根據(jù)3D的坐標(biāo)視圖解釋對(duì)應(yīng)的坐標(biāo)軸X對(duì)應(yīng)瀏覽器左右移動(dòng)，Y對(duì)應(yīng)瀏覽器上下移動(dòng)，Z則是眼睛和瀏覽器連成的模擬線，Z越大視覺(jué)效果上瀏覽器中的元素越來(lái)越遠(yuǎn)。

3D坐標(biāo)圖解












1· 首先我們要準(zhǔn)備一個(gè)div容器去存放一個(gè)正方體,設(shè)置好視角，視距，開(kāi)啟子元素3D轉(zhuǎn)換功能，然后將正方行的6個(gè)面全部疊在一坨。代碼如下：

index.html

<!DOCTYPE html><html> <head> <meta charset=utf-8> <title>正方體拆解</title> <link rel="stylesheet" href="./box.csss" type="text/css"> </head> <body> <div class="container-box"> <div class="box-front">前面</div> <div class="box-after">后面</div> <div class="box-left">左面</div> <div class="box-right">右面</div> <div class="box-up">上面</div> <div class="box-down">下面</div> </div> </body></html>box.css

.container-box{ position:relative; width:600px; height: 600px; perspective: none; perspective-origin: center; transform-style: preserve-3d; background-color: #edf9fa;}.container-box > div{ position:absolute; left: 200px; top: 200px; width:200px; height:200px; line-height:200px; text-align:center; }.container-box > .box-front{ background-color:#fffeee}.container-box > .box-after{ background-color:#92ffc8}.container-box > .box-left{ background-color:#0316ff}.container-box > .box-right{ background-color:#03dbff}.container-box > .box-up{ background-color:#ffbe03}.container-box > .box-down{ background-color:#ff3e03}
第一步視覺(jué)效果，淡藍(lán)色為容器，紅色為最后一個(gè)面，其他面均在其下方
2·將前面向前推動(dòng)200px；后面向前推到0px

box.css

.container-box{ position:relative; width:600px; height: 600px; perspective: none; perspective-origin: center; transform-style: preserve-3d; background-color: #edf9fa;}.container-box > div{ position:absolute; left: 200px; top: 200px; width:200px; height:200px; line-height:200px; text-align:center; }.container-box > .box-front{ background-color:#fffeee; transform: translateZ(200px);}.container-box > .box-after{ background-color:#92ffc8; transform: translateZ(0);}.container-box > .box-left{ background-color:#0316ff}.container-box > .box-right{ background-color:#03dbff}.container-box > .box-up{ background-color:#ffbe03}.container-box > .box-down{ background-color:#ff3e03}
第二步視覺(jué)效果，淡藍(lán)色為容器，淡黃色為前面，其他面在這個(gè)面之下
3· 前后面動(dòng)刀后，我們動(dòng)刀左右面.左面向左移動(dòng)100px,并向前移動(dòng)100px，然后以默認(rèn)中心點(diǎn)延Y軸轉(zhuǎn)動(dòng)-90°；右面向右移動(dòng)100px,并向前移動(dòng)100px，然后以默認(rèn)中心點(diǎn)延Y軸轉(zhuǎn)動(dòng)90°。千萬(wàn)不要暈啊，需要一點(diǎn)點(diǎn)3D思維，大家可以拿個(gè)正方體想象一下。

.container-box{ position:relative; width:600px; height: 600px; perspective: none; perspective-origin: center; transform-style: preserve-3d; background-color: #edf9fa;}.container-box > div{ position:absolute; left: 200px; top: 200px; width:200px; height:200px; line-height:200px; text-align:center; }.container-box > .box-front{ background-color:#fffeee; transform: translateZ(200px);}.container-box > .box-after{ background-color:#92ffc8; transform: translateZ(0);}.container-box > .box-left{ background-color:#0316ff; transform: translateX(-100px) translateZ(100px) rotateY(-90deg); }.container-box > .box-right{ background-color:#03dbff; transform: translateX(100px) translateZ(100px) rotateY(90deg);}.container-box > .box-up{ background-color:#ffbe03;}.container-box > .box-down{ background-color:#ff3e03;}
第三步：效果圖咋看沒(méi)變化，實(shí)則不是，想象一下我們從正方體正面正中心看過(guò)去是不是除了正面我們什么也看不見(jiàn)，這時(shí)候我們就要旋轉(zhuǎn)下正方體了來(lái)看達(dá)到效果
4· 將正方體的容器延X(jué)軸，Y軸旋轉(zhuǎn)30°，添加一行css

.container-box { transform: rotateX(30deg) rotateY(30deg);}.container-box > .box-up{ display:none;}.container-box > .box-down{ display:none;}
轉(zhuǎn)動(dòng)，并隱藏上未處理的上下面 后的效果圖
5· 接下來(lái)我們只需要處理上下面就OK了，上面向上移動(dòng)100px，向前移動(dòng)100px，然后以默認(rèn)中心點(diǎn)延X(jué)軸轉(zhuǎn)動(dòng)90°；下面向下移動(dòng)100px，向前移動(dòng)100px，然后以默認(rèn)中心點(diǎn)延X(jué)軸轉(zhuǎn)動(dòng)-90°；

box.css

.container-box{ position:relative; width:600px; height: 600px; perspective: none; perspective-origin: center; transform-style: preserve-3d; background-color: #edf9fa; transform: rotateX(30deg) rotateY(30deg);}.container-box > div{ position:absolute; left: 200px; top: 200px; width:200px; height:200px; line-height:200px; text-align:center; }.container-box > .box-front{ background-color:#fffeee; transform: translateZ(200px);}.container-box > .box-after{ background-color:#92ffc8; transform: translateZ(0);}.container-box > .box-left{ background-color:#0316ff; transform: translateX(-100px) translateZ(100px) rotateY(-90deg); }.container-box > .box-right{ background-color:#03dbff; transform: translateX(100px) translateZ(100px) rotateY(90deg);}.container-box > .box-up{ background-color:#ffbe03; transform: translateY(-100px) translateZ(100px) rotateX(90deg);}.container-box > .box-down{ background-color:#ff3e03; transform: translateY(100px) translateZ(100px) rotateX(-90deg);}
最終我們完成后的頁(yè)面效果，最后我們?cè)谔砑由蟿?dòng)畫(huà)效果讓正方體轉(zhuǎn)動(dòng)起來(lái)
5. 添加requestAnimationFrame幀動(dòng)畫(huà)，使正方形以自身中心點(diǎn)旋轉(zhuǎn)變換。(下面代碼各位直接復(fù)制成靜態(tài)HTML即可觀察)

index.html

<!DOCTYPE html><html> <head> <meta charset=utf-8> <title>正方體拆解</title> <style> .container-box{ position:relative; width:600px; height: 600px; perspective: none; perspective-origin: center; transform-style: preserve-3d; transform-origin: center center 100px; } .container-box > div{ position:absolute; left: 50%; top: 50%; margin-left:-100px; margin-top:-100px; width:200px; height:200px; line-height:200px; text-align:center; } .container-box > .box-front{ background-color:#fffeee; transform: translateZ(200px); } .container-box > .box-after{ background-color:#92ffc8; transform: translateZ(0); } .container-box > .box-left{ background-color:#0316ff; transform: translateX(-100px) translateZ(100px) rotateY(-90deg); } .container-box > .box-right{ background-color:#03dbff; transform: translateX(100px) translateZ(100px) rotateY(90deg); } .container-box > .box-up{ background-color:#ffbe03; transform: translateY(-100px) translateZ(100px) rotateX(90deg); } .container-box > .box-down{ background-color:#ff3e03; transform: translateY(100px) translateZ(100px) rotateX(-90deg); } </style> </head> <body> <div class="container-box"> <div class="box-front">前面</div> <div class="box-after">后面</div> <div class="box-left">左面</div> <div class="box-right">右面</div> <div class="box-up">上面</div> <div class="box-down">下面</div> </div> <script> //閉包、也可以理解為自執(zhí)行函數(shù) (function(){ var animatEle = document.querySelector('div.container-box'); var x = 0, y = 0, z = 0; var animation = function(){ //定義動(dòng)畫(huà) x += +(Math.random().toFixed(2)); y += +(Math.random().toFixed(2)); z += +(Math.random().toFixed(2)); debugger; animatEle.style.transform = `rotateX(${x}deg) rotateY(${y}deg) rotateZ(${z}deg)`; requestAnimationFrame(animation) } requestAnimationFrame(animation);//啟動(dòng)幀動(dòng)畫(huà) }()) </script> </body></html>
幀動(dòng)畫(huà)效果
幀動(dòng)畫(huà)寫(xiě)太多JS代碼感覺(jué)并不是很理想，再次刪除JavaScript代碼，下篇幅具體分析CSS3動(dòng)畫(huà)，希望大家多多關(guān)注，后期也會(huì)繼續(xù)更新博客

關(guān)鍵詞：

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉