html中图形做匀速往返运动,CSS3 @keyframes 实现匀速旋转魔方（搬运工）

* html

* css

@keyframes box {

0% {

transform: rotatex(0deg) rotateY(0deg) rotateZ(0deg);

}

100% {

transform: rotatex(360deg) rotateY(360deg) rotateZ(360deg);

}

}

#wrap {

width: 400px;

height: 400px;

padding: 100px;

margin: 150px auto;

perspective: 1200px;

}

.wrap {

width: 400px;

height: 400px;

transition: 5s;

transform-style: preserve-3d;

position: relative;

animation: box 10s linear infinite;

transform-origin: center center -200px;

;

}

.wrap div:nth-of-type(1) {

position: absolute;

background: #fe0000;

background-image: url('http://img1.gtimg.com/tj/pics/hv1/117/208/2153/140051982.jpg');

right: -400px;

top: 0;

transform: rotateY(90deg);

transform-origin: left;

}

.wrap div:nth-of-type(2) {

position: absolute;

background: #0000fe;

background-image: url('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=841408372,3004217725&fm=11&gp=0.jpg');

bottom: -400px;

left: 0;

transform: rotatex(-90deg);

transform-origin: top;

}

.wrap div:nth-of-type(3) {

position: absolute;

background: #00ff01;

background-image: url('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2388632836,3966607624&fm=26&gp=0.jpg');

bottom: 0px;

left: 0;

backface-visibility: hidden;

}

.wrap div:nth-of-type(4) {

position: absolute;

background: #ff610a;

background-image: url('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=192610795,467565159&fm=26&gp=0.jpg');

bottom: 0px;

left: -400px;

transform: rotateY(-90deg);

transform-origin: right;

}

.wrap div:nth-of-type(5) {

position: absolute;

background: #fff;

background-image: url("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2936477803,4198185787&fm=15&gp=0.jpg");

top: -400px;

left: 0;

transform: rotatex(90deg);

transform-origin: bottom;

}

.wrap div:nth-of-type(6) {

position: absolute;

background: #ffff00;

background-image: url('http://img0.pclady.com.cn/pclady/1611/02/1612285_jyz.jpg');

bottom: 0px;

left: 0;

transform: translateZ(-400px);

}

.wrap div {

border-radius: 4px;

overflow: hidden;

width: 400px;

height: 400px;

}