对于css3的perspective的学习

最新推荐文章于 2020-02-01 14:21:07 发布

weixin_30539625

最新推荐文章于 2020-02-01 14:21:07 发布

阅读量72

点赞数

原文链接：http://www.cnblogs.com/xxygogo/p/4932300.html

版权

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

注意的是这个属性和 transform: translateZ(20em), 结合的使用的时候效果更加不错。

试着做了一个跳动的效果，看着还错，呵呵

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>视觉</title>
    <style>
    body {
        font-size: 2em;
    }
    
    .box {
        width: 3em;
        height: 3em;
        margin: 0 auto;
        transform-style: preserve-3d;
        perspective: 300px;
        perspective-origin: 50% 50%;
    }
    
    .box_cont {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 1px solid #999;
        transform: translateZ(20em);
        animation: show 2s forwards;
    }
    
    @keyframes show {
        0% {
            transform: translateZ(20em);
        }
        15% {
            transform: translateZ(15em);
        }
        30% {
            transform: translateZ(10em);
        }
        45% {
            transform: translateZ(5em);
        }
        60% {
            transform: translateZ(1em);
        }
        75% {
            transform: translateZ(5em);
        }
        100% {
            transform: translateZ(1em);
        }
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="box_cont">
        </div>
    </div>
</body>

</html>