您的位置：首页 > Web前端 > CSS

CSS3嵌套立方体旋转

2016-07-12 11:26 459 查看 
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
html{
background: linear-gradient( yellow 0%,#000 80%);
height: 100%;
}
.warp{
margin-top: 160px;
position:relative;
perspective: 1000px;
-webkit-perspective: 1000px;
}
.box{
width: 200px;
height: 200px;
position: relative;
margin:  0 auto;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
transform:rotateY(-70deg) rotateX(-123deg);
animation: rotateBox 2s infinite linear;
}
.box div{
position: absolute;
width: 100%;
height: 100%;
border: 1px solid #fff;
background-color: #0082d8;
opacity: .8;
font-size: 26px;
line-height: 200px;
text-align: center;
}
.box span{
display: block;
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
background-color: #000;
opacity: 0.8;
border: 1px solid #d3eef8;

}
/***外部盒子样式***/
.out-font{
transform: translateZ(100px);
}
.out-back{
transform: translateZ(-100px);
}
.out-left{
transform: translateY(-100px) rotateX(90deg);
}
.out-right{
transform: translateY(100px) rotateX(-90deg);
}
.out-top{
transform:rotateY(-90deg) translateZ(-100px);
}
.out-bottom{
transform: rotateY(90deg) translateZ(-100px);
}
/***内部盒子样式***/
.in-font{
transform: translateZ(-50px);
}
.in-back{
transform: translateZ(50px);
}
.in-left{
transform: translateY(50px) rotateX(90deg);
}
.in-right{
transform: translateY(-50px) rotateX(-90deg);
}
.in-top{
transform:rotateY(-90deg) translateZ(50px);
}
.in-bottom{
transform:rotateY(90deg) translateZ(-50px);
}
/***旋转动画***/
@keyframes rotateBox {
0%{
transform: rotateX(0deg) rotateY(0deg);
}
25%{
transform: rotateX(90deg) rotateY(90deg);
}

50%{
transform: rotateX(180deg) rotateY(180deg);
}
75%{
transform: rotateX(270deg) rotateY(270deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg);
}
}

.warp:hover .out-font{
transform: translateZ(200px);
}
.warp:hover .out-back{
transform: translateZ(-200px);
}
.warp:hover .out-left{
transform: translateY(-200px) rotateX(90deg);
}
.warp:hover .out-right{
transform: translateY(200px) rotateX(-90deg);
}
.warp:hover .out-top{
transform:rotateY(-90deg) translateZ(-200px);
}
.warp:hover .out-bottom{
transform: rotateY(90deg) translateZ(-200px);
}

</style>
</head>
<body>
<div class="warp">
<div class="box">
<div class="out-font">前面</div>
<div class="out-back">后面</div>
<div class="out-left">左面</div>
<div class="out-right">右面</div>
<div class="out-top">上面</div>
<div class="out-bottom">下面</div>
<span class="in-font"></span>
<span class="in-back"></span>
<span class="in-left"></span>
<span class="in-right"></span>
<span class="in-top"></span>
<span class="in-bottom"></span>
</div>
</div>
</body>
</html>


“`
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航