<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3旋转立方体效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 400px;
border: 1px solid #000;
margin: 30px auto;
perspective: 1200px;/*设置元素被查看位置的视图----景深 看物体的远近 数值大越远*/
-webkit-perspective: 1200px; /* Safari 和 Chrome */
}
.box ul{
width: 300px;
height: 300px;
border: 1px solid #000000;
position: relative;
transform-style: preserve-3d; /*设置3d场景*/
-webkit-transform-style: preserve-3d; /* Safari 和 Chrome */
animation: move 2s infinite linear; /*运动时间代表动画循环快慢*/
transform-origin: center center 150px; /*第三个需要给具体数值*/
-webkit-transform-origin:center center 150px;
margin: 50px;
}
.box ul li{
width: 300px;
height: 300px;
line-height: 300px;
position: absolute;
font-size: 50px;
transition: all .5s;
text-align: center;
list-style: none;
}
.box ul li:nth-of-type(1){
background: red;
opacity: 0.5;
}
.box ul li:nth-of-type(2){
background: blue;
opacity: 0.5;
transform: translateX(300px) rotateY(-90deg);
-webkit-transform: translateX(300px) rotateY(-90deg); /* Safari 和 Chrome */
transform-origin: left;
-webkit-transform-origin:left;
}
.box ul li:nth-of-type(3){
background: blueviolet;
opacity: 0.5;
transform: translateX(-300px) rotateY(90deg);
-webkit-transform: translateX(-300px) rotateY(90deg);
transform-origin: right;
-webkit-transform-origin:right;
}
.box ul li:nth-of-type(4){
background: brown;
opacity: 0.5;
transform: translateY(-300px) rotateX(-90deg);
-webkit-transform: translateY(-300px) rotateX(-90deg);
transform-origin: bottom;
-webkit-transform-origin:bottom;
}
.box ul li:nth-of-type(5){
background: deeppink;
opacity: 0.5;
transform: translateY(300px) rotateX(90deg);
-webkit-transform: translateY(300px) rotateX(90deg);
transform-origin: top;
-webkit-transform-origin:top;
}
.box ul li:nth-of-type(6){
background: yellow;
opacity: 0.5;
transform: translateZ(300px);
-webkit-transform: translateZ(300px);
}
@keyframes move{
from{transform: rotateY(0deg);}
to{transform: rotateY(360deg);}
}
@-webkit-keyframes move{
from{-webkit-transform: rotateY(0deg);}
to{-webkit-transform: rotateY(360deg);}
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>最骚的css3</li>
<li>最骚的css3</li>
<li>最骚的css3</li>
<li>最骚的css3</li>
<li>最骚的css3</li>
<li>最骚的css3</li>
</ul>
</div>
</body>
</html>