Html
    Css
    Js

    
                        
@keyframes xuanz {
	0% {
	transform:rotateY(0deg) rotatex(15deg);
}
100% {
	transform:rotateY(360deg) rotatex(15deg);
}
}.wt {
	perspective:800px;
}
.d1 {
	transform-style:preserve-3d;
	position:relative;
	width:200px;
	height:200px;
	margin:400px auto;
	animation:xuanz 10s infinite linear;
}
.d1 div {
	width:200px;
	height:200px;
	position:absolute;
	left:0;
	top:0;
}
.d1 div:nth-child(1) {
	transform:translatez(-100px);
	background:url(https://www.jq22.com/img/cs/500x500-1.png) 0 -50PX /cover;
}
.d1 div:nth-child(2) {
	transform:rotateY(90deg) translatez(-100px);
	background:url(https://www.jq22.com/img/cs/500x500-2.png) 0 -50PX /cover;
}
.d1 div:nth-child(3) {
	transform:rotateY(90deg) translatez(100px);
	background:url(https://www.jq22.com/img/cs/500x500-3.png) 0 -50PX /cover;
}
.d1 div:nth-child(4) {
	transform:rotatex(-90deg) translatez(100px);
	background:url(https://www.jq22.com/img/cs/500x500-4.png) 0 -50PX /cover;
}
.d1 div:nth-child(5) {
	transform:rotatex(-90deg) translatez(-100px);
	background:url(https://www.jq22.com/img/cs/500x500-6.png) 0 -50PX /cover;
}
.d1 div:nth-child(6) {
	transform:translatez(100px);
	background:url(https://www.jq22.com/img/cs/500x500-5.png) 0 -10PX /cover;
}
.d1 div:nth-child(7),div:nth-child(8),div:nth-child(9),div:nth-child(10),div:nth-child(11),div:nth-child(12) {
	width:300px;
	height:300px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-150px;
	margin-top:-150px;
	opacity:0.3;
	transition:transform 1s;
}
.d1 div:nth-child(7) {
	transform:translatez(-150px);
	background:url(https://www.jq22.com/img/cs/500x500-1.png) 0 -50PX /cover;
}
.d1 div:nth-child(8) {
	transform:rotateY(90deg) translatez(-150px);
	background:url(https://www.jq22.com/img/cs/500x500-1.png) 0 -50PX /cover;
}
.d1 div:nth-child(9) {
	transform:rotateY(90deg) translatez(150px);
	background:url(https://www.jq22.com/img/cs/500x500-1.png) 0 -50PX /cover;
}
.d1 div:nth-child(10) {
	transform:rotatex(-90deg) translatez(150px);
	background:url(https://www.jq22.com/img/cs/500x500-1.png) 0 -50PX /cover;
}
.d1 div:nth-child(11) {
	transform:rotatex(-90deg) translatez(-150px);
	background:url(https://www.jq22.com/img/cs/500x500-1.png) 0 -50PX /cover;
}
.d1 div:nth-child(12) {
	transform:translatez(150px);
	background:url(https://www.jq22.com/img/cs/500x500-1.png) 0 -10PX /cover;
}
body:hover div:nth-child(7) {
	transform:translatez(-300px) scale(1.2);
	opacity:0.8;
}
.wt:hover div:nth-child(8) {
	transform:rotateY(90deg) translatez(-300px) scale(1.2);
	opacity:0.8;
}
.wt:hover div:nth-child(9) {
	transform:rotateY(90deg) translatez(300px) scale(1.2);
	opacity:0.8;
}
.wt:hover div:nth-child(10) {
	transform:rotatex(-90deg) translatez(300px) scale(1.2);
	opacity:0.8;
}
.wt:hover div:nth-child(11) {
	transform:rotatex(-90deg) translatez(-300px) scale(1.2);
	opacity:0.8;
}
.wt:hover div:nth-child(12) {
	transform:translatez(300px) scale(1.2);
	opacity:0.8;
}

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

纯css 3d立方体相册(原创)

更新时间:2021-06-11 01:35:22

代码自己写的,最简单的3d效果

0