CSS / css动画（2）

效果图：https://wuyanzhi.gitee.io/square/

总结的动画的知识点： https://blog.csdn.net/zhumizhumi/article/details/82970626

代码：

html：（里面用到的图片没有放）

 <div class="boss">
        <div class="common front" title="front"></div>
        <div class="common later" title="later"></div>
        <div class="common top" title="top"></div>
        <div class="common bottom" title="bottom"></div>
        <div class="common left" title="left"></div>
        <div class="common right" title="right"></div>
 </div>

css：

html,body{
    margin:0;
    height: 100%;
    width: 100%;
    background: radial-gradient(circle,#555,#000,#000);
    overflow: hidden;
        -webkit-perspective:1000px;
        -moz-perspective:1000px;
        -ms-perspective:1000px;
        -o-perspective:1000px;
    perspective:1000px;
}
.boss{
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style:preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-perspective-style:preserve-3d;
        /* 动画名称  周期  无限  线性 */
    animation: rotateMyse 5s infinite linear;  
        -webkit-animation: rotateMyse 5s infinite linear;
        -moz-animation: rotateMyse 5s infinite linear;
        -ms-animation: rotateMyse 5s infinite linear;
        -o-animation: rotateMyse 5s infinite linear;
        transform: rotateX(50deg) rotateY(32deg);   
}
.common{
    position: absolute; 
    width: 200px;
    height: 200px;
    background-size: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.front{
    background-image: url("../img/front.jpg");
    transform: translateZ(100px);
        /* Safari and Chrome  Firefox ie  Opera */
        -webkit-transform: translateZ(100px);
        -moz-transform: translateZ(100px);
        -ms-transform: translateZ(100px);
        -o-transform: translateZ(100px);
}
.later{
    background-image: url("../img/later.jpg");
    transform:translateZ(-100px);
        -webkit-transform:translateZ(-100px);
        -moz-transform:translateZ(-100px);
        -ms-transform:translateZ(-100px);
        -o-transform:translateZ(-100px);
}
.top{
    background-image: url("../img/top.jpg");
    transform: rotateX(-90deg) translateZ(100px);
        -webkit-transform: rotateX(-90deg) translateZ(100px);
        -moz-transform: rotateX(-90deg) translateZ(100px);
        -ms-transform: rotateX(-90deg) translateZ(100px);
        -o-transform: rotateX(9-0deg) translateZ(100px);
}
.bottom{
    background-image: url("../img/bottom.jpg");
    transform: rotateX(90deg) translateZ(100px);
        -webkit-transform: rotateX(90deg) translateZ(100px);
        -moz-transform: rotateX(90deg) translateZ(100px);
        -ms-transform: rotateX(90deg) translateZ(100px);
        -o-transform: rotateX(90deg) translateZ(100px);
}
.left{
    background-image: url("../img/left.jpg");
    transform: rotateY(-90deg) translateZ(100px);
        -webkit-transform: rotateY(-90deg) translateZ(100px);
        -moz-transform: rotateY(-90deg) translateZ(100px);
        -ms-transform: rotateY(-90deg) translateZ(100px);
        -o-transform: rotateY(-90deg) translateZ(100px);
}
.right{
    background-image: url("../img/right.jpg");
    transform: rotateY(90deg) translateZ(100px);
        -webkit-transform: rotateY(90deg) translateZ(100px);
        -moz-transform: rotateY(90deg) translateZ(100px);
        -ms-transform: rotateY(90deg) translateZ(100px);
        -o-transform: rotateY(90deg) translateZ(100px);
}
@keyframes rotateMyse{
    0%{
        transform: rotateX(0deg)  rotateY(0deg) rotateZ(0deg);
    }
    100%{
        transform: rotateX(360deg)  rotateY(360deg) rotateZ(360deg);
    }
}
@-webkit-keyframes rotateMyse{
	0%{
		-webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0);
	}
	100%{
		-webkit-transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
	}
}
@-moz-keyframes rotateMyse{
	0%{
		-moz-transform:rotateX(0deg) rotateY(0deg) rotateZ(0);
	}
	100%{
		-moz-transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
	}
}
@-ms-keyframes rotateMyse{
	0%{
		-ms-transform:rotateX(0deg) rotateY(0deg) rotateZ(0);
	}
	100%{
		-ms-transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
	}
}
@-o-keyframes rotateMyse{
	0%{
		-o-transform:rotateX(0deg) rotateY(0deg) rotateZ(0);
	}
	100%{
		-o-transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
	}
}