生活随笔
收集整理的這篇文章主要介紹了
css3制作正方体
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
第一步
先設(shè)置六個(gè)一樣大小的正方形并且設(shè)置絕對(duì)定位讓著六個(gè)面疊放在同一位置并給box設(shè)置為3D屬性
如圖：
html代碼
<ul class="box"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>
css代碼
.box{width: 200px;height: 200px;position:absolute;transform-style: preserve-3d;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}.box li{width: 200px;height: 200px;position: absolute;left: 0;top:0;}
第二步
用偽類選擇符選中第一個(gè)面，讓它沿Z軸走-200px，設(shè)置個(gè)背景色為紅色；用偽類選擇符選中第二個(gè)面，讓它沿著X軸走200px，并沿著Y軸旋轉(zhuǎn)90度，在改變選擇點(diǎn)為左邊中心，設(shè)置個(gè)背景色為黃色；用偽類選擇符選中第三個(gè)面，讓它沿著X軸走 -200px，并沿著Y軸旋轉(zhuǎn)-90度，在改變選擇點(diǎn)為右邊中心，設(shè)置個(gè)背景色為灰色；用偽類選擇符選中第四個(gè)面，讓它沿著Y軸走 200px，并沿著X軸旋轉(zhuǎn)-90度，在改變選擇點(diǎn)為上邊中心，設(shè)置個(gè)背景色為綠u色；用偽類選擇符選中第五個(gè)面，讓它沿著Y軸走 -200px，并沿著X軸旋轉(zhuǎn)90度，在改變選擇點(diǎn)為下邊中心u，設(shè)置個(gè)背景色為藍(lán)色；第六個(gè)面設(shè)置個(gè)背景色為粉紅色；
css代碼為
.box li:nth-child(1){transform: translateZ(-200px
);background: red
;}.box li:nth-child(2){transform: translateX(200px
) rotateY(90deg
);transform-origin: left center
;background: yellow
;}.box li:nth-child(3){transform: translateX(-200px
) rotateY(-90deg
);transform-origin: right center
;background: #ccc
;}.box li:nth-child(4){transform: translateY(200px
) rotateX(-90deg
);transform-origin: top center
;background: green
;}.box li:nth-child(5){transform: translateY(-200px
) rotateX(90deg
);transform-origin: bottom center
;background: blue
;}.box li:nth-child(6){background: pink
;}
第三步
給正方體設(shè)置一個(gè)動(dòng)畫代碼如下
@keyframes play{from{transform: rotateX(0
) rotateY(0
);}to{transform: rotateX(360deg
) rotateY(360deg
);}}
并給box加上代碼
animation: play 5s linear infinite;
就可以實(shí)現(xiàn)正方體
如圖：
總結(jié)
以上是生活随笔為你收集整理的css3制作正方体的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
