這篇文章主要介紹“css如何實現(xiàn)一個3D效果的魔方”，在日常操作中，相信很多人在css如何實現(xiàn)一個3D效果的魔方問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css如何實現(xiàn)一個3D效果的魔方”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比文縣網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式文縣網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋文縣地區(qū)。費(fèi)用合理售后完善，10余年實體公司更值得信賴。
在 3D 空間中轉(zhuǎn)換最重要幾個形態(tài)的是平移，旋轉(zhuǎn)與縮放，接下來將會介紹與制作一個 3D 效果立方體相關(guān)的 CSS 屬性及函數(shù)。
重慶分公司
重慶分公司
transform-styleperspectivebackface-visibility 一個立方體，必然存在于一個 3D 空間，首先需要使用 CSS 指明該立方體處于 3D 空間中。
.cube {
transform-style: preserve-3d;
}
通過 CSS 的屬性值 transform-style: preserve-3d 可以設(shè)置該元素的所有子元素都處于 3D 空間。
在科幻小說三體中，云天明講了三個故事，其中講到有一個深水王子，無論你在遠(yuǎn)處看還是近處看，他都一般高，不會受距離增減的影響，不符合我們現(xiàn)實中「近大遠(yuǎn)小」的透視規(guī)律。
正是有了透視距離，現(xiàn)實世界的事物才會有層次感，而在 CSS 的 3D 世界里，也有一個屬性代表透視距離。
.cube {
perspective: 800px;
// 觀察者眼睛位于上邊看的全面
perspective-origin: 150% -150%;
}
與二維平面不同，在 3D 空間中多了一個 Z 軸，而與 Z 軸 垂直的平面構(gòu)成了 Z 平面，即我們在 2D 方向上能夠看到的這個平面。
perspective 定義了觀察者眼睛與 Z=0 平面(即投影面)的距離，來制造一種空間感。
perspective 最小可設(shè)置為 1px，當(dāng)它值越小時，物體在投影面上越大。如下圖所示
perspective-origin 代表觀察者眼睛的位置，默認(rèn)居中
.cube {
transform: translate3d(x, y, z);
}
translate3d(x, y, z) 定義了元素在 3D 空間沿坐標(biāo)系的平移，而如果只在單軸上平移，則可以使用獨(dú)立的 API。
translateX(x):
translate3d(x, 0, 0)translateY(y):
translate3d(0, y, 0)translateZ(z):
translate3d(0, 0, z)當(dāng)作 Z 軸方向平移時，正值代表離用戶越來越近，即在視覺效果上它會越來越大。負(fù)值則相反。具體視覺效果可參考 MDN 文檔。
一種他們在三維坐標(biāo)系下的正方向如下所示：
translateZ | MDN[1]
.cube {
transform: rotate3d(x, y, z, a);
}
rotate3d 定義了元素在 3D 空間的旋轉(zhuǎn)，旋轉(zhuǎn)相比平移來說，它要多一個指標(biāo)：「旋轉(zhuǎn)軸，它根據(jù)從原點(diǎn)出發(fā)的向量 [x, y, z] 來確定旋轉(zhuǎn)軸?！?/strong>
[x, y, z] 坐標(biāo)自然由 rotate3d(x, y, z, a) 來指定，那如何確定原點(diǎn)呢？
原點(diǎn)坐標(biāo)由屬性 transform-origin 來指定，如果只有前兩個值代表在 2D 平面，如果有三個值代表在 3D 空間。
?你可以通過圍繞各個坐標(biāo)軸旋轉(zhuǎn) 180 度，來確定原點(diǎn)坐標(biāo)
?
.cube {
transform-origin: 100px 100px 100px;
}
可以通過對一個立方體的旋轉(zhuǎn)對 rotate3d 有直觀的了解
在正常狀態(tài)下，各面數(shù)字如下
rotateX(180deg)沿 X 軸旋轉(zhuǎn) 180 度后，位面 2 面對用戶
rotateZ(180deg)沿 Z 軸旋轉(zhuǎn) 180 度后，位面 1 面對用戶，但是翻轉(zhuǎn)了過來
通過 MDN 文檔也可以對各個轉(zhuǎn)換有更直觀的了解
對 CSS 3D 方面的屬性及值進(jìn)行熟悉之后，就能夠很容易地畫出一個立方體。
一個立方體由六個面組成，分別使用 Up，Down，Left，Right，Front，Back 的首字母進(jìn)行表示。使用 html 描述它的結(jié)構(gòu)如下
U .cube-container: 為立方體提供布局，使之處于屏幕中心位置.cube: 表示該立方體容器.face: 表示該立方體的六個面在 .cube 選擇器中聲明一個 3D 空間，指定 perspective 與 transform-style 屬性
.cube {
perspective: 1500px;
transform-style: preserve-3d;
}
為了立方體的美觀，優(yōu)雅及調(diào)試方便，對立方體加入一些 3D 無關(guān)的樣式: 關(guān)于布局，顯示及色彩
為立方體提供一個 100px/100px 大小的容器，并處于屏幕正中，并且立方體每一面的字也垂直居中
$ width: 100px;
.cube-container {
display: flex;
justify-content: center;
align-items: center;
height: 500px;
}
.cube {
width: $width;
height: $width;
margin: $width;
}
.face {
background: #f60;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
color: #fff;
}
接下來對六個面做絕對定位，并且根據(jù)目標(biāo)位置做適當(dāng)?shù)钠揭婆c旋轉(zhuǎn)即可組成立方體。
$width: 100px;
.face {
width: $width;
height: $width;
position: absolute;
&.face-up {
transform: rotateX(90deg) translateZ($width / 2);
}
&.face-down {
transform: rotateX(-90deg) translateZ($width / 2);
}
&.face-left {
transform: rotateY(-90deg) translateZ($width / 2);
}
&.face-right {
transform: rotateY(90deg) translateZ($width / 2);
}
&.face-front {
transform: translateZ($width / 2);
}
&.face-back {
transform: rotateX(180deg) translateZ($width / 2);
}
}
效果圖如下
全部代碼如下
codepen[6]
此時 3D 空間的立方體已經(jīng)成形，為了更加形象，我決定給它一個動畫。
下列 CSS 動畫使它繞著向量 [1, 1, 0] 永無停歇地旋轉(zhuǎn)。
@keyframes rotate {
0% {
transform: rotate3d(0, 0, 0, 0);
}
100% {
transform: rotate3d(1, 1, 0, 360deg);
}
}
.cube {
animation: rotate 2s linear reverse infinite;
}
效果圖如下所示
魔方由 27 個小塊組成，通過 translate3d 對 27 個小立方塊進(jìn)行位移，即可得到一個魔方，代碼如下所示
mixin coordinate() {
@for $x from 1 through 3 {
@for $y from 1 through 3 {
@for $z from 1 through 3 {
.cube-#{$x}-#{$y}-#{$z} {
transform: translate3d(($x - 2) * $width, ($y - 2) * $width, ($z - 2) * $width);
}
}
}
}
}
@include coordinate();到此，關(guān)于“css如何實現(xiàn)一個3D效果的魔方”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
新聞名稱：css如何實現(xiàn)一個3D效果的魔方
當(dāng)前網(wǎng)址：http://weahome.cn/article/gdodpo.html
