<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>8.2 3D 螺旋轮播</title>
<style>
*{
margin: 0;
padding: 0;
}
.slider{
width: 600px;
height: 300px;
/*border: 1px red solid;*/
margin: 150px auto;
position: relative;
}
/*.slider-outer{*/
/*-webkit-transform-style: preserve-3d;*/
/*-moz-transform-style: preserve-3d;*/
/*-ms-transform-style: preserve-3d;*/
/*transform-style: preserve-3d;*/
/*transform: rotateY(30deg) rotateX(30deg);*/
/*}*/
.slider-outer,.slider-items , .img{
height: 100%;
width: 100%;
position: absolute;
}
.slider-items{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: 2s;
width: 100px;
}
.img:nth-child(1){
background-image: url("images/1-1.jpg");
transform: rotateX(0deg) translateZ(150px);
}
.img:nth-child(2){
background-image: url("images/1-2.jpg");
transform: rotateX(90deg) translateZ(150px);
}
.img:nth-child(3){
background-image: url("images/1-3.jpg");
transform: rotateX(180deg) translateZ(150px);
}
.img: