html如何图片立体自动旋转,html+css实现3D旋转图片展示

MyHtml.html

*{margin:0px ; padding:0px}

body{background:url("imgs/bg.jpg")}

.list{width:1200px; height:700px;background:rgba(0,0,0,0.3 );

box-shadow:0px 0px 5px #000;margin:20px auto;}

.list ul{padding:2px 0px;list-style-type:none;}

.list ul li{width:240px;height:256px;

float:left;margin:36px 25px;padding:5px;

perspective:1000px;

}

.list .move{width:240px;height:256px;transform-style:preserve-3D;

transform:translateZ(-30px);

/*延长时间 */

transition:transform 12s}

.list .move .poster,.list .move .infor{position:absolute;

border:1px solid #99FF00;width:230px;

height:246px;

backface-visibility:hidden;

}

.list .move .poster{

transform:translateZ(130px);

}

.list .move .infor{

transform:rotateY(90deg) translateZ(130px);

}

.list ul li:hover .move{

transform:rotateY(-88deg) translateZ(20px);

}

.list ul li:hover .move .poster,.list .move .infor{

border-radius:12px;box-shadow:0px 0px 6px #CC00CC;overflow:hidden;

}

• 

  

• 

  

• 

  

• 

  

• 

  

• 

  

• 

  

• 

  

• 

  

• 

  

•