CSS制作3D魔方效果
css源码：
body {
-webkit-perspective: 500;
}
.wrap {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
-webkit-transition: all 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.wrap:hover {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(50deg) rotateY(50deg);
}
.wrap div {
position: absolute;
width: 180px;
height: 180px;
margin: 5px;
line-height: 180px;
font-size: 32px;
text-align: center;
}
.wrap div:nth-child(1) {
-webkit-transform: translateZ(100px);
background: rgba(255, 0, 0, 0.1);
}
.wrap div:nth-child(2) {
-webkit-transform: translateZ(-100px);
background: rgba(255, 255, 0, 0.5);
}
.wrap div:nth-child(3) {
-webkit-transform: rotateY(90deg) translateZ(100px);
background: rgba(255, 0, 255, 0.5);
}
.wrap div:nth-child(4) {
-webkit-transform: rotateY(90deg) translateZ(-100px);
background: rgba(175, 0, 0, 0.5);
}
.wrap div:nth-child(5) {
-webkit-transform: rotateX(90deg) translateZ(100px);
background: rgba(0, 175, 0, 0.5);
}
.wrap div:nth-child(6) {
-webkit-transform: rotateX(90deg) translateZ(-100px);
background: rgba(0, 0, 175, 0.5);
}html源码：
<body>
<div class="wrap">
<div>HYY</div>
<div></div>
<div>CSS3</div>
<div>HTML5</div>
<div>JavaScript</div>
<div>AJAX</div>
</div>
</body>未经过本人许可，请勿私自转载，谢谢！
695
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
