css之简单动画
<!DOCTYPE html>
<html>
<head>
<title>变换</title>
<meta charset="utf-8">
<style type="text/css">
#d1{
width: 400px;
height: 400px;
margin: 200px;
/*border:1px solid #000;*/
position: relative;
transform-style: preserve-3d;
transform: rotateX(30deg) rotateY(30deg);
animation: lft 10s linear infinite;
}
#d1 div{
width: 400px;
height: 400px;
border:1px solid red;
position: absolute;
transform-style: preserve-3d;
box-shadow: 0px 0px 50px 30px #ccc inset;
}
#s1{
transform:rotateX(90deg) translateZ(-200px);
border-radius: 100%;
/*box-shadow: 0px 0px 50px 30px red;*/
}
#s3{
transform:rotateX(90deg) translateZ(200px);
border-radius: 100%;
}
#s5{
transform:rotateY(90deg) translateZ(-200px);
}
#s6{
transform:rotateY(90deg) translateZ(200px);
}
#s4{
transform: translateZ(-200px);
}
#s2{
transform: translateZ(200px);
overflow: hidden;
}
@keyframes lft{
form{ transform: rotate(0deg); }
to{transform: rotateX(0deg) rotateY(2600deg);}
}
</style>
<div id="d1">
<div id="s1">1</div>
<div id="s2">2</div>
<div id="s3">3</div>
<div id="s4">4</div>
<div id="s5">5</div>
<div id="s6">6</div>
</div>
</body>
</html>
