美文网首页
css动画之黑科技

css动画之黑科技

作者: 秀逼 | 来源:发表于2017-11-01 10:00 被阅读0次

    正负旋转相消3D动画

    直接上代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>正负旋转相消</title>
    </head>
    <style type="text/css">
    body,
    html {
        overflow: hidden;
    }
    
    div {
        transform-style: preserve-3d;
        perspective: 500px;
    }
    
    .reverseRotate {
        margin: 20vh auto;
    }
    
    .rotate,
    .reverseRotate {
        width: 50vh;
        height: 50vh;
    }
    
    .content {
        width: 100%;
        height: 100%;
        line-height: 50vh;
        text-align: center;
        background-color: rgba(255, 100, 100, .8);
        font-size: 5vh;
        color: #fff;
        box-shadow: 0px 0px 8px 2px rgba(100, 100, 100, .6);
    }
    
    .rotate {
        animation: rotate 5s linear infinite; 
    }
    
    .reverseRotate {
        animation: reverseRotate 5s linear infinite; 
    }
    
    @keyframes rotate {
        0% {
            transform: rotateX(0deg) rotateZ(0deg);
        }
        50% {
            transform: rotateX(40deg) rotateZ(180deg);
        }
        100% {
            transform: rotateX(0deg) rotateZ(360deg);
        }
    }
    
    @keyframes reverseRotate {
        0% {
            transform: rotateZ(0deg);
        }
        100% {
            transform: rotateZ(-360deg);
        }
    }
    </style>
    <body>
    <div class="reverseRotate">
        <div class="rotate">
            <div class="content">正负旋转相消3D动画</div>
        </div>
    </div>
    </body>
    </html>
    

    这里要注意两点:其一,是开启3D转换的代码。其二:是外层两个祖先元素正负旋转相消的理解,注意理解rotateX,rotateY,rotateZ分别是以x,y,z三个轴为中心进行旋转。

    相关文章

      网友评论

          本文标题:css动画之黑科技

          本文链接:https://www.haomeiwen.com/subject/fbswpxtx.html