CSS3轻量级立体式3D旋转动画效果

CSS3轻量级立体式3D旋转动画效果

点击查看演示

一、案例分析

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

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

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

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

二、HTML源代码

    <div class="wrap">
        <div class="flip-3d">
            <figure>
                <img src="img/1.jpg" alt="">
                <figcaption>tom</figcaption>
            </figure>
        </div>
        <div class="flip-3d">
            <figure>
                <img src="img/2.jpg" alt="">
                <figcaption>mouse</figcaption>
            </figure>
        </div>
        <div class="flip-3d">
            <figure>
                <img src="img/3.jpg" alt="">
                <figcaption>elva</figcaption>
            </figure>
        </div>
    </div>

三、CSS源代码

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: #efefef;
        }
        .wrap{
            width: 1000px;
            overflow: hidden;
            margin: 0 auto;
        }
        .flip-3d{
            width: 33%;
            float: left;
            perspective: 1200px;
        }
        .flip-3d figure{
            font-size: 1.6rem;
            margin: 25px;
            position: relative;
            transform-style: preserve-3d;
            transition: 1s transform;
        }
        .flip-3d:hover figure{
            transform: rotateY(0.5turn);
        }
        .flip-3d figure img{
            width: 100%;
            height: auto;
        }
        .flip-3d figure figcaption{
            width: 100%;
            height: 100%;
            background: rgba(255,255,255,0.9);
            position: absolute;
            top: 0;
            text-align: center;
            padding-top: 45%;
            transform: rotateY(0.5turn) translateZ(1px);
            opacity: 0.6;
            transition: 1s 0.5s opacity;
        }
        .flip-3d:hover figure figcaption{
            opacity: 1;
        }
        .flip-3d figure::after{
            content: '';
            display: block;
            width: 100%;
            height: 8vw;
            transform: rotateX(90deg);
            background-image: radial-gradient(ellipse closest-side, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
        }
        @media screen and (max-width:800px) {
            .flip-3d{
                perspective-origin: center top;
            }
            .flip-3d figure{
                width: 50%;
                margin: 0 auto;
                margin-bottom: 12vw;
            }
            .flip-3d figure figcaption{
                font-size: 0.8rem;
            }
            .flip-3d figure:last-child{
                display: none;
            }
        }
    </style>