我的思路：
1??首先，用div元素画6个正方形摞在一起放在画布中间。为了区分，分别给每个div选择了不同的颜色，并且设置为半透明方便透视。
2??将6个div元素分为三组（上下一组、左右一组、前后一组），想象以画布中心为圆点，使三组分别沿x/y/z轴旋转90度。
3??上下一组，一张向上推50%正方形边长，一张向下推50%正方形边长；左右同理向左右推50%边长，前后同理向前后推50%边长。
4??整体旋转展示。
※Html代码&CSS样式布局：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
<style>
.container{
width:400px;
height:400px;
border:1pxsolid#cccccc;
}
.box{
position:relative;
width:100px;
height:100px;
margin:auto;
margin-top:150px;
transform-style:preserve-3d;
}
.boxdiv{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:.5;
transform-origin:center;
}
.boxdiv:nth-of-type(1){
}
.boxdiv:nth-of-type(2){
background-color:yellow;
}
.boxdiv:nth-of-type(3){
background-color:green;
}
.boxdiv:nth-of-type(4){
background-color:blue;
}
.boxdiv:nth-of-type(5){
background-color:black;
}
.boxdiv:nth-of-type(6){
background-color:darkmagenta;
}
</style>
</head>
<body>
<divclass="container">
<divclass="boxanimate">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
※CSS3添加6个正方形的动画效果
.box.animatediv{
animation:ease4s0sinfinite;
}
.box.animatediv:nth-of-type(1){
animation-name:box1-move;
}
.box.animatediv:nth-of-type(2){
animation-name:box2-move;
}
.box.animatediv:nth-of-type(3){
animation-name:box3-move;
}
.box.animatediv:nth-of-type(4){
animation-name:box4-move;
}
.box.animatediv:nth-of-type(5){
animation-name:box5-move;
}
.box.animatediv:nth-of-type(6){
animation-name:box6-move;
}
@keyframesbox1-move{
0%{
transform:rotatex(0deg);
}
25%{
transform:rotatex(90deg);
}
50%{
transform:rotatex(90deg)translatez(50px);
}
100%{
transform:rotatex(90deg)translatez(50px);
}
}
@keyframesbox2-move{
0%{
transform:rotatex(0deg);
}
25%{
transform:rotatex(90deg);
}
50%{
transform:rotatex(90deg)translatez(-50px);
}
100%{
transform:rotatex(90deg)translatez(-50px);
}
}
@keyframesbox3-move{
0%{
transform:rotatex(0deg);
}
25%{
transform:rotatey(90deg);
}
50%{
transform:rotatey(90deg)translatez(50px);
}
100%{
transform:rotatey(90deg)translatez(50px);
}
}
@keyframesbox4-move{
0%{
transform:rotatex(0deg);
}
25%{
transform:rotatey(90deg);
}
50%{
transform:rotatey(90deg)translatez(-50px);
}
100%{
transform:rotatey(90deg)translatez(-50px);
}
}
@keyframesbox5-move{
0%{
}
25%{
transform:translatez(0px);
}
50%{
transform:translatez(50px);
}
100%{
transform:translatez(50px);
}
}
@keyframesbox6-move{
0%{
}
25%{
transform:translatez(0px);
}
50%{
transform:translatez(-50px);
}
100%{
transform:translatez(-50px);
}
}
※添加整提旋转动画
.box.animate{
animation:box-moveease4s0sinfinite;
}
@keyframesbox-move{
0%{
transform:rotatex(0deg)rotatey(0deg)
}
50%{
transform:rotatex(45deg)rotatey(45deg)
}
100%{
transform:rotatex(405deg)rotatey(405deg)
}
}
动画转的我有点头晕??♀?，所以我决定把.animate类名剥离出来，用JavaScript通过按钮触发的模式将.animate添加到DOM中去，这样，只有点击按钮后动画才会被触发。最后，我添加了两个按钮，move和stop，分别用来触发动画和使动画停止。
<!--Html代码-->
<divclass="ope">
<buttonid="animate">Move</button>
<buttonid="stop">Stop</button>
</div>
<!--CSS代码-->
.ope{
margin-top:100px;
text-align:center;
}
.opebutton{
margin:010px;
border:1pxsolid#4380f5;
border-radius:5px;
cursor:pointer;
background-color:#4380f5;
color:#ffffff;
outline:none;
}
.opebutton:hover{
background-color:#3e76e3;
}
.opebutton:active{
background-color:#3361ba;
}
<!--JavaScript代码-->
<script>
(function(){
varbox=document.getElementsByClassName('box')[0];
document.getElementById('animate').onclick=function(){
box.className='boxanimate';
}
document.getElementById('stop').onclick=function(){
box.className='box';
}
})();
</script>
如果您觉得本文的内容对您的学习有所帮助：
关键字：
HTML