PROMULGATOR

    世界末日了

    北京市263网络通信股份有限公司
    Html
    Css
    Js

    
                        
#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);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

纯css 3D旋转

0