css同时旋转rotate3d,纯css 3D旋转

#a {

width:800px;

height:400px;

margin:0 auto;

/*perpective*/

-webkit-perspective:1200px;

}

#b {

width:800px;

height:400px;

transform:rotatex(-20deg) rotatey(0deg);

/*border:1px solid red;

*/

position:relative;

/*规定 子元素 按照3d位置摆放*/

-webkit-transform-style:preserve-3d;

animation:xz 10s linear infinite;

/*float:left;

*/

}

#b div {

width:100px;

height:100px;

background:#e4393c;

/*绝对定位*/

position:absolute;

top:150px;

left:350px;

}

#b div:nth-child(1) {

transform:rotatey(0deg) translatez(200px);

}

#b div:nth-child(2) {

transform:rotatey(60deg) translatez(200px);

}

#b div:nth-child(3) {

transform:rotatey(120deg) translatez(200px);

}

#b div:nth-child(4) {

transform:rotatey(180deg) translatez(200px);

}

#b div:nth-child(5) {

transform:rotatey(240deg) translatez(200px);

}

#b div:nth-child(6) {

transform:rotatey(300deg) translatez(200px);

}

@keyframes xz {

100% {

transform:rotatex(-20deg) rotatey(360deg);

}

}img {

width:100px;

height:100px;

}

#c {

width:390px;

height:390px;

background:#ddd url('timg (2).jpg') no-repeat;

background-size:390px 390px;

border-radius:50%;

position:absolute;

top:-145px;

left:204px;

transform:rotatex(-64deg) translatez(237px);

}