css3-图片3D翻转

最新推荐文章于 2025-06-27 17:00:09 发布

转载最新推荐文章于 2025-06-27 17:00:09 发布 · 86 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lufy/archive/2012/05/21/2511219.html

本文详细介绍如何使用CSS实现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，就是璇转

转载于:https://www.cnblogs.com/lufy/archive/2012/05/21/2511219.html