Html
    Css
    Js

    
                        
body {
	background:#cef;
}
#all {
	margin:250px auto;
	-webkit-perspective:2500px;
}
#imgs div {
	position:absolute;
	left:300px;
	width:235px;
	height:235px;
}
#imgs img {
	width:235px;
	height:235px;
	border-radius:15px;
	opacity:0.6;
}
#imgs {
	-webkit-transform-style:preserve-3d;
	animation:imgs 6s linear  infinite;
}
#h {
	transform:rotatey(0deg) translatez(200px);
}
#qy {
	transform:rotatey(60deg) translatez(200px);
}
#qz {
	transform:rotatey(120deg) translatez(200px);
}
#hy {
	transform:rotatey(180deg) translatez(200px);
}
#hz {
	transform:rotatey(240deg) translatez(200px);
}
#q {
	transform:rotatey(300deg) translatez(200px);
}
@keyframes imgs {
	0% {
	transform:rotatey(0deg) rotatex(30deg)
}
50% {
	transform:rotatey(180deg) rotatex(-30deg)
}
100% {
	transform:rotatey(360deg)rotatex(30deg)
}
}#imgs:hover {
	-webkit-animation-play-state:paused;
}
#h img:hover,#qy img:hover,#hy img:hover,#qz img:hover,#hz img:hover,#q img:hover {
	transform:scale(1.5);
}
#h img,#qy img,#hy img,#qz img,#hz img,#q img {
	transition:all 0.3s linear;
}

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

CS3炫酷六边体旋转立体相册

2
      二十三岁0
      2017/5/25 15:00:50

      不是・・・上面一个也是这么写的,比你强大点

      回复
      Nancy0
      2017/5/18 17:54:58