Html
    Css
    Js

    
                        
@keyframes move {
	0% {
	transform:rotateY(0deg) rotateX(0deg)
}
100% {
	transform:rotateY(360deg) rotateX(360deg)
}
}body {
	background-color:rgba(0,0,0,.8);
}
div {
	width:171px;
	height:171px;
}
.shape {
	transform-style:preserve-3d;
	will-change:transform;
	translateY(30deg);
	margin:0 auto;
	margin-top:100px;
	animation:move 120s linear infinite;
}
.circle {
	border:1px solid red;
	position:absolute;
	transform-origin:50% 50% 0;
	background-color:rgba(221,0,49,0.8);
	box-shadow:rgba(221,0,49,0.8) 0 0 150px;
}
.top {
	transform:translateY(85px) rotateX(90deg);
}
.bottom {
	transform:translateY(-85px) rotateX(90deg);
}
.left {
	transform:translateX(-85px) rotateY(90deg);
}
.right {
	transform:translateX(85px) rotateY(90deg);
}
.inside {
	transform:translateZ(85px)
}
.outside {
	transform:translateZ(-85px)
}

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

codeSBox网站首页正方体效果

0