css3-圖片3D翻轉

.line_3d{
    -webkit-animation-name:y-ain;
    -webkit-animation-duration:5s;
    -webkit-animation-timing-function:ease;
    -webkit-animation-iteration-count:infinite;
    }
       
@-webkit-keyframes y-ain{
    0%{-webkit-transform:rotateY(0deg);}
    50%{-webkit-transform:rotateY(180deg);}
    100%{-webkit-transform:rotateY(360deg);}
    }
    

上面是水平翻轉（如果把X改成Y 就是垂直翻轉）

.line_3d{
    -webkit-animation-name:y-ain;
    -webkit-animation-duration:5s;
    -webkit-animation-timing-function:ease;
    -webkit-animation-iteration-count:infinite;
    }
    
.ain_3d{
    -webkit-animation-name:x-ain;
    -webkit-animation-duration:7s;
    -webkit-animation-timing-function:ease-in;
    -webkit-animation-iteration-count:infinite;
    }
    
@-webkit-keyframes y-ain{
    0%{-webkit-transform:rotateY(0deg);}
    50%{-webkit-transform:rotateY(180deg);}
    100%{-webkit-transform:rotateY(360deg);}
    }
    
@-webkit-keyframes x-ain{
    0%{-webkit-transform:rotateX(180deg);}
    50%{-webkit-transform:rotateX(0deg);}
    100%{-webkit-transform:rotateX(360deg);}
    }

上面是同時翻轉，即把外層的設為X，里面的設為Y

<div id="demo_3d" class="ain_3d">
    <div id="img_box_1" class="line_3d">
        <img src="images/show02.jpg" width="300" height="200" />
        <img src="images/show03.jpg" alt="" width="300" height="200" />
        <img src="images/show04.jpg" alt="" width="300" height="200" />
    </div>
</div>

上面是結構

rotate不加X或Y，就是璇轉