对于css3的perspective的学习

    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>

 

posted @ 2015-11-03 10:11  小阳在追逐  阅读(175)  评论(0)  编辑  收藏  举报