CSS3 3D球形是一種在網(wǎng)頁設(shè)計中常用的效果,可以為網(wǎng)頁添加更加立體、生動的效果并且增強視覺效果。通過CSS3的“transform”屬性,可以實現(xiàn)球形的效果。
/*CSS代碼*/
.container {
perspective: 1000px;
/*定義透視視角,一般設(shè)為與容器距離的1/4或者1/3*/
}
.ball {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
/*讓球體居中*/
transform-style: preserve-3d;
/*設(shè)置元素為3D空間*/
animation: rotate infinite linear 10s;
/*設(shè)置球體的旋轉(zhuǎn)動畫*/
}
@keyframes rotate {
0% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
首先,我們需要在包含球形的容器上設(shè)置透視,通過“perspective”屬性設(shè)置。然后,設(shè)置球形的樣式,使用“border-radius”屬性設(shè)置為50%即可。將球形居中,使用“transform”屬性進行調(diào)整。接著,我們需要設(shè)置球形為3D空間的元素,使用“transform-style”屬性即可實現(xiàn)。
最后,我們?yōu)榍蛐翁砑有D(zhuǎn)的動畫效果,使用CSS的“@keyframes”規(guī)則設(shè)置關(guān)鍵幀。最終,一個美觀的CSS3 3D球形就完成了。