[css] 用css3画出一个立体魔方
生活随笔
收集整理的這篇文章主要介紹了
[css] 用css3画出一个立体魔方
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
[css] 用css3畫(huà)出一個(gè)立體魔方
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>立方體</title><style>.box{width: 300px;height: 300px;margin: 100px auto;perspective: 500px;}.con{position:relative;width:300px;height:300px;transform-style:preserve-3d;transform-origin:50% 50% -150px;animation:rotate 4s infinite;}.con .side{position:absolute;width:300px;height:300px;font-size:44px;line-height: 300px;text-align: center;}.con .before{background-color: rgba(0,0,0,0.4);}.con .left{background-color: rgba(255,0,0,0.4);left:-300px;top:0;transform:rotateY(-90deg);transform-origin:right;}.con .right{background-color: rgba(255,255,0,0.4);left:300px;top:0;transform:rotateY(90deg);transform-origin:left;}.con .top{background-color: rgba(0,255,0,0.4);left:0;top:-300px;transform:rotateX(90deg);transform-origin:bottom;}.con .bottom{background-color: rgba(0,0,255,0.4);left:0;top:300px;transform:rotateX(-90deg);transform-origin:top;}.con .back{background-color: rgba(200,122,0,0.4);transform:translateZ(-300px);}@keyframes rotate{0%{transform:rotateX(0) rotateY(0);}50%{transform:rotateX(0) rotateY(360deg);}100%{transform:rotateX(360deg) rotateY(360deg);}}</style> </head> <body> <div class="box"><div class="con"><div class="side before">前</div><div class="side back">后</div><div class="side top">上</div><div class="side bottom">下</div><div class="side left">左</div><div class="side right">右</div></div> </div> </body> </html>個(gè)人簡(jiǎn)介
我是歌謠，歡迎和大家一起交流前后端知識(shí)。放棄很容易，
但堅(jiān)持一定很酷。歡迎大家一起討論
主目錄
與歌謠一起通關(guān)前端面試題
總結(jié)
以上是生活随笔為你收集整理的[css] 用css3画出一个立体魔方的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Unicode编码表/常用码表(内容多、
- 下一篇： 干货|手把手教你写单片机的结构体