CSS3中transform图片飞入动画特效

CSS3中transform图片飞入动画特效

点击查看演示

一、案例分析

1、立体式3D旋转--perspective: 1200px;结合transform-style: preserve-3d;一起使用。

2、鼠标悬停到图片上，沿着Y轴旋转180度--transform: rotateY(0.5turn);。

3、图片反正，背景逐渐变成变色，文字清晰。

4、使用伪类.flip-3d figure::after，在图片的下方，制作一个压扁的椭圆图形。

二、HTML源代码

   <div id="wrapper">
        <img src="./img/top1.png" alt="">
        <img src="./img/top2.png" alt="">
        <img src="./img/top3.png" alt="">
        <img src="./img/top4.png" alt="">
        <img src="./img/top5.png" alt="">
    </div>

三、CSS源代码

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background:#ff5046;
            overflow: hidden;
        }
        #wrapper{
            width: 960px;
            height: 240px;
            margin: 200px auto 0;
            position: relative;
        }
        #wrapper img{
            position: absolute;
        }
        #wrapper img:nth-child(1){
            left: -1000px;
            top: 113px;
        }
        #wrapper img:nth-child(1).on{
            left: -8px;
            transition:0.5s 1s;
        }
        #wrapper img:nth-child(2){
            left: -1000px;
            top: 84px;
        }
        #wrapper img:nth-child(2).on{
            left: 163px;
            transition: 0.5s 0.5s;
        }
        #wrapper img:nth-child(3){
            left: 310px;
            top: 0;
            animation: shake 0.8s linear;
        }
        #wrapper img:nth-child(4){
            left: 1700px;
            top: 21px;
        }
        #wrapper img:nth-child(4).on{
            left: 510px;
            transition: 0.5s 0.5s;
        }
        #wrapper img:nth-child(5){
            top: 0;
            left: 1700px;
        }
        #wrapper img:nth-child(5).on{
            left: 656px;
            transition: 0.5s 1s;
        }
        @keyframes shake {
            0%{ transform: scale(0); }
            30%{ transform: scale(1.2); }
            40%{ transform: scale(0.8); }
            50%{ transform: scale(1.5); }
            60%{ transform: scale(0.9); }
            70%{ transform: scale(1.1); }
            80%{ transform: scale(0.95); }
            90%{ transform: scale(1.05); }
            100%{ transform: scale(1); }
        }
    </style>

四、JS源代码

页面加载后，通过遍历，把每个img图像标签上，添加属性class，设置类名为on

    <script>
        let wrapper = document.getElementById('wrapper')
        let aImgs = wrapper.getElementsByTagName('img')
        window.onload = function(){
            for(let i=0; i<aImgs.length; i++){
                aImgs[i].className = 'on'
            }
        }
    </script>