Html
    Css
    Js

    
                        
@-webkit-keyframes spin {
	0% {
	-webkit-transform:rotateY(0deg);
	transform:rotateY(0deg)
}
100% {
	-webkit-transform:rotateY(360deg);
	transform:rotateY(360deg)
}
}@-moz-keyframes spin {
	0% {
	-moz-transform:rotateY(0deg);
	transform:rotateY(0deg)
}
100% {
	-moz-transform:rotateY(360deg);
	transform:rotateY(360deg)
}
}@-ms-keyframes spin {
	0% {
	-ms-transform:rotateY(0deg);
	transform:rotateY(0deg)
}
100% {
	-ms-transform:rotateY(360deg);
	transform:rotateY(360deg)
}
}@-o-keyframes spin {
	0% {
	-o-transform:rotateY(0deg);
	transform:rotateY(0deg)
}
100% {
	-o-transform:rotateY(360deg);
	transform:rotateY(360deg)
}
}@keyframes spin {
	0% {
	transform:rotateY(0deg)
}
100% {
	transform:rotateY(360deg)
}
}.stage {
	width:300px;
	height:300px;
	margin:15px auto;
	position:relative;
	-webkit-perspective:300px;
	-moz-perspective:300px;
	-ms-perspective:300px;
	-o-perspective:300px;
	perspective:300px;
}
.container {
	top:50%;
	left:50%;
	margin:-100px 0 0 -100px;
	position:absolute;
	-webkit-transform:translateZ(-100px);
	-moz-transform:translateZ(-100px);
	-ms-transform:translateZ(-100px);
	-o-transform:translateZ(-100px);
	transform:translateZ(-100px);
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-ms-transform-style:preserve-3d;
	-o-transform-style:preserve-3d;
	transform-style:preserve-3d;
}
.container:hover {
	-moz-animation:spin 5s linear infinite;
	-o-animation:spin 5s linear infinite;
	-webkit-animation:spin 5s linear infinite;
	animation:spin 5s linear infinite;
}
.side {
	background:rgba(255,0,0,0.3);
	border:1px solid red;
	font-size:60px;
	font-weight:bold;
	color:#fff;
	height:196px;
	line-height:196px;
	position:absolute;
	text-align:center;
	text-shadow:0 -1px 0 rgba(0,0,0,0.2);
	text-transform:uppercase;
	width:196px;
}
.front {
	-webkit-transform:translateZ(100px);
	-moz-transform:translateZ(100px);
	-ms-transform:translateZ(100px);
	-o-transform:translateZ(100px);
	transform:translateZ(100px);
}
.back {
	-webkit-transform:rotateX(180deg) translateZ(100px);
	-moz-transform:rotateX(180deg) translateZ(100px);
	-ms-transform:rotateX(180deg) translateZ(100px);
	-o-transform:rotateX(180deg) translateZ(100px);
	transform:rotateX(180deg) translateZ(100px);
}
.left {
	-webkit-transform:rotateY(-90deg) translateZ(100px);
	-moz-transform:rotateY(-90deg) translateZ(100px);
	-ms-transform:rotateY(-90deg) translateZ(100px);
	-o-transform:rotateY(-90deg) translateZ(100px);
	transform:rotateY(-90deg) translateZ(100px);
}
.right {
	-webkit-transform:rotateY(90deg) translateZ(100px);
	-moz-transform:rotateY(90deg) translateZ(100px);
	-ms-transform:rotateY(90deg) translateZ(100px);
	-o-transform:rotateY(90deg) translateZ(100px);
	transform:rotateY(90deg) translateZ(100px);
}
.top {
	-webkit-transform:rotateX(90deg) translateZ(100px);
	-moz-transform:rotateX(90deg) translateZ(100px);
	-ms-transform:rotateX(90deg) translateZ(100px);
	-o-transform:rotateX(90deg) translateZ(100px);
	transform:rotateX(90deg) translateZ(100px);
}
.bottom {
	-webkit-transform:rotateX(-90deg) translateZ(100px);
	-moz-transform:rotateX(-90deg) translateZ(100px);
	-ms-transform:rotateX(-90deg) translateZ(100px);
	-o-transform:rotateX(-90deg) translateZ(100px);
	transform:rotateX(-90deg) translateZ(100px);
}

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

3D盒子(原创)

这是个简单的3d盒子,可移动鼠标旋转

0