纯css3实现3D立方体旋转特效及代码

在网上看到3D立方体特效很酷炫,便想着学习一下,技术小白,大家担待,下面便是我所实现的视觉效果:
纯css3实现3D立方体旋转特效及代码_第1张图片用大家熟悉的农药人物看着是不是比较容易感染情绪,嘿嘿。
话不多说,直接上代码(这里要感谢零下一度,毕竟从他那里直接粘来的大部分代码):

CSS3 3D立方体多边形动画特效 - 代码笔记

margin:0 auto;

padding:0;

}

@keyframes rotate{

0%{

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

}

100%{

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

}

}

html{

height:100%;

}

.wrap{

margin-top:200px;

perspective: 1000px; /* 视图距元素的距离 相当于摄像机 */

}

.cube{

width:200px;

height:200px;

position:relative;

color:#fff;

font-size:0px;

font-weight:bold;

text-align:center;

line-height:200px;

transform-style:preserve-3d; /* 默认flat 2D */

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

animation:rotate 20s infinite linear; /*播放时间 播放次数为循环 缓动效果为匀速 */

}

.cube > div{

width:100%;

height:100%;

border:0px solid #fff;

position:absolute;

background-color:#333;

opacity:.9;

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:0px 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);

}

img{
width: 100%;

    height: 100%

}

你可能感兴趣的:(纯css3实现3D立方体旋转特效及代码)