css3立方体3d旋转,纯css3实现的3D立体动态旋转立方体特效

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家，也给大家做个参考。

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

*{

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; /* 视图距元素的距离 相当于摄像机 */

}

.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; /* 默认flat 2D */

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

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

}

.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及以下浏览器。

以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。