CSS3的立方體旋轉(zhuǎn)角度是一種非常有趣的動(dòng)態(tài)效果，可以讓網(wǎng)頁(yè)設(shè)計(jì)變得更加生動(dòng)有趣。
.cube-container {
position: relative;
transform-style: preserve-3d;
}
.cube {
width: 200px;
height: 200px;
position: absolute;
transform-style: preserve-3d;
transform: translateZ(-100px);
transition: transform 1s;
}
.cube:hover {
transform: translateZ(-100px) rotateY(180deg);
}
.cube-face {
position: absolute;
width: 200px;
height: 200px;
background-color: rgba(0,0,0,0.2);
border: 2px solid #fff;
box-sizing: border-box;
}
.cube-face:nth-child(1) {
transform: rotateY(0deg) translateZ(100px);
}
.cube-face:nth-child(2) {
transform: rotateY(90deg) translateZ(100px);
}
.cube-face:nth-child(3) {
transform: rotateY(180deg) translateZ(100px);
}
.cube-face:nth-child(4) {
transform: rotateY(270deg) translateZ(100px);
}
.cube-face:nth-child(5) {
transform: rotateX(90deg) translateZ(100px);
}
.cube-face:nth-child(6) {
transform: rotateX(-90deg) translateZ(100px);
}以上是實(shí)現(xiàn)一個(gè)立方體旋轉(zhuǎn)的CSS代碼，首先需要一個(gè)
作為容器，設(shè)置為相對(duì)定位。然后每個(gè)面都是一個(gè)
元素，絕對(duì)定位和3D效果一樣使用transform-style: preserve-3d。每個(gè)面旋轉(zhuǎn)時(shí)使用rotateY和rotateX，同時(shí)需要加上translateZ來(lái)產(chǎn)生立體感，以及hover事件實(shí)現(xiàn)鼠標(biāo)懸停時(shí)旋轉(zhuǎn)的效果。
CSS3的立方體旋轉(zhuǎn)角度可以為網(wǎng)頁(yè)增添動(dòng)態(tài)效果，讓網(wǎng)頁(yè)更加生動(dòng)、有趣。通過(guò)使用transform-style和translateZ屬性，我們可以輕松實(shí)現(xiàn)3D效果，同時(shí)借助rotateY和rotateX進(jìn)行旋轉(zhuǎn)，使立方體產(chǎn)生出更靈活多變的變化。
下一篇CSS3用的多嗎