H5C3实现360度旋转图片

12 Dec 2017

Reading time ~1 minute

图片翻转效果

关键点：

transform-origin: top right;
子绝父相
transform: rotate(60deg);

html

    <div>
        <img src="images/6.jpg" alt=""/>
        <img src="images/5.jpg" alt=""/>
        <img src="images/4.jpg" alt=""/>
        <img src="images/3.jpg" alt=""/>
        <img src="images/2.jpg" alt=""/>
        <img src="images/1.jpg" alt=""/>
    </div>

    div {
        width: 250px;
        height: 170px;
        margin: 200px auto;
        position: relative;
     }
    div img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transition: all 0.6s;
        transform-origin: top right;
    }
        /*鼠标经过div 第一张图片旋转*/
     div:hover img:nth-child(1){
         transform: rotate(60deg);
     }
     div:hover img:nth-child(2){
         transform: rotate(120deg);
     }
     div:hover img:nth-child(3){
         transform: rotate(180deg);
     }
     div:hover img:nth-child(4){
         transform: rotate(240deg);
     }
     div:hover img:nth-child(5){
         transform: rotate(300deg);
     }
     div:hover img:nth-child(6){
         transform: rotate(360deg);
     }