CSS3 3D立方體多邊形動(dòng)畫(huà)特效 - 代碼筆記

*{

margin:0 auto;

padding:0;

}

@keyframes rotate{

0%{

transform:rotateX(0deg) rotateY(0deg);

}

100%{

transform:rotateX(360deg) rotateY(360deg);

}

}

html{

background:linear-gradient(#ff0 0%, #000 80%);

height:100%;

}

.wrap{

margin-top:200px;

perspective: 1000px; /* 視圖距元素的距離 相當(dāng)于攝像機(jī) */

}

.cube{

width:200px;

height:200px;

position:relative;

color:#fff;

font-size:36px;

font-weight:bold;

text-align:center;

line-height:200px;

transform-style:preserve-3d; /* 默認(rèn)flat 2D */

transform:rotateX(-30deg) rotateY(-70deg);

animation:rotate 20s infinite linear; /*播放時(shí)間 播放次數(shù)為循環(huán) 緩動(dòng)效果為勻速 */

}

.cube > div{

width:100%;

height:100%;

border:1px solid #fff;

position:absolute;

background-color:#333;

opacity:.6;

transition:transform 0.4s ease-in;

}

.cube .out-front{

transform: translateZ(100px);

}

.cube .out-back{

transform: translateZ(-100px) rotateY(180deg);

}

.cube .out-left{

transform: translateX(-100px) rotateY(-90deg);

}

.cube .out-right{

transform: translateX(100px) rotateY(90deg);

}

.cube .out-top{

transform: translateY(-100px) rotateX(90deg);

}

.cube .out-bottom{

transform: translateY(100px) rotateX(-90deg);

}

.cube > span{

display:block;

width:100px;

height:100px;

border:1px solid black;

background-color:#999;

position:absolute;

top:50px;

left:50px;

}

.cube .in-front{

transform: translateZ(50px);

}

.cube .in-back{

transform: translateZ(-50px) rotateY(180deg);

}

.cube .in-left{

transform: translateX(-50px) rotateY(-90deg);

}

.cube .in-right{

transform: translateX(50px) rotateY(90deg);

}

.cube .in-top{

transform: translateY(-50px) rotateX(90deg);

}

.cube .in-bottom{

transform: translateY(50px) rotateX(-90deg);

}

.wrap:hover .out-front{

transform: translateZ(200px);

}

.wrap:hover .out-back{

transform: translateZ(-200px) rotateY(180deg);

}

.wrap:hover .out-left{

transform: translateX(-200px) rotateY(-90deg);

}

.wrap:hover .out-right{

transform: translateX(200px) rotateY(90deg);

}

.wrap:hover .out-top{

transform: translateY(-200px) rotateX(90deg);

}

.wrap:hover .out-bottom{

transform: translateY(200px) rotateX(-90deg);

}

前面后面左面右面上面下面

適用瀏覽器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下瀏覽器。

總結(jié)

以上是生活随笔為你收集整理的html3d旋转发光立方体,纯css3实现的3D立体动态旋转立方体特效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。