html立体旋转照片墙,js实现旋转的照片墙

【实例简介】

【实例截图】

【核心代码】

韦德最后一舞

.out{ width:0px; height:350px;background: gray; margin:300px auto; -webkit-transform-style:preserve-3d; -webkit-perspective:1000px;-webkit-perspective-origin: center center;}

.con{width:105px; height:1000px; -webkit-transform-style:preserve-3d; position: relative; -webkit-transform: rotateY(20deg) rotateX(20deg);}

.con div{width:105px; height:200px; background: red; position: absolute; left: 20px; top:0px;}

.con div:nth-child(1){background:#324212;-webkit-transform: translateZ(300px);}

.con div:nth-child(2){background:#537212;-webkit-transform:rotateY(22.5deg) translateZ(300px);}

.con div:nth-child(3){background:#865332;-webkit-transform: rotateY(45deg) translateZ(300px);}

.con div:nth-child(4){background:#325612;-webkit-transform: rotateY(67.5deg) translateZ(300px);}

.con div:nth-child(5){background:#374712;-webkit-transform: rotateY(90deg) translateZ(300px);}

.con div:nth-child(6){background:#329612;-webkit-transform: rotateY(112.5deg) translateZ(300px);}

.con div:nth-child(7){background:#322612;-webkit-transform: rotateY(135deg) translateZ(300px);}

.con div:nth-child(8){background:#621612;-webkit-transform: rotateY(157.5deg) translateZ(300px);}

.con div:nth-child(9){background:#324256;-webkit-transform: rotateY(180deg) translateZ(300px);}

.con div:nth-child(10){background:#335712;-webkit-transform: rotateY(202.5deg) translateZ(300px);}

.con div:nth-child(11){background:#51212;-webkit-transform: rotateY(225deg) translateZ(300px);}

.con div:nth-child(12){background:#553212;-webkit-transform: rotateY(247.5deg) translateZ(300px);}

.con div:nth-child(13){background:#124212;-webkit-transform: rotateY(270deg) translateZ(300px);}

.con div:nth-child(14){background:#346212;-webkit-transform: rotateY(292.5deg) translateZ(300px);}

.con div:nth-child(15){background:#273212;-webkit-transform: rotateY(315deg) translateZ(300px);}

.con div:nth-child(16){background:#921212;-webkit-transform: rotateY(337.5deg) translateZ(300px);}

@-webkit-keyframes 'run'{

0%{-webkit-transform:rotateX(-20deg) rotateY(0deg);}

100%{-webkit-transform:rotateX(-20deg) rotateY(180deg);}

}

.con2{-webkit-animation:run 20s linear infinite 1s;}

#content1 img {

width: 105px;

height:180px;

}

#content2 img {

width: 105px;

height:180px;

}

#content3 img {

width: 105px;

height:180px;

}#content4 img {

width: 105px;

height:180px;

}

#content5 img {

width: 105px;

height:180px;

}#content6 img {

width: 105px;

height:180px;

}#content7 img {

width: 105px;

height:180px;

}

#content8 img {

width: 105px;

height:180px;

}

#content9 img {

width: 105px;

height:180px;

}

#content10 img {

width: 105px;

height:180px;

}

#content11 img {

width: 105px;

height:180px;

}

#content12 img {

width: 105px;

height:180px;

}

#content13 img {

width: 105px;

height:180px;

}

#content14 img {

width: 105px;

height:180px;

}

#content15 img {

width: 105px;

height:180px;

}

#content16 img {

width: 105px;

height:180px;

2003-2004

2018-2019

2017-2018

2016-2017

2015-2016

2014-2015

2013-2014

2012-2013

2011-2012

2010-2011

2009-2010

2008-2009

2007-2008

2006-2007

2005-2006

2004-2005