3D效果

transform-style:preserve:给需要做3D动画的元素的父元素开启3D效果

当然,只给元素开启3D效果是没有效果的,这个时候我们需要设置舞台的深度,也就是设置Z轴的大小。

注意:当你设置后,你移动的深度不能够超出舞台深度,一超过舞台深度,你设置的动画效果将会超出Z轴,从而无法使用。

那么我们开启3D效果后,如果需要添加效果,比如:平移translate、旋转rotate……

那么旋转的话就必须有一个原点,或是叫中心点,那么这个时候我们就需要用到一个属性:

perspective:开启3D模式的舞台中心点(中心点)的位置

无论是开启3D效果,模式,还是设置舞台深度,亦或是设置基准点,都是给父元素设置的。

以下是一个立方体旋转效果:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>立方体</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html{  
           background: -webkit-radial-gradient(center, ellipse, #430d6d 0%, #000000 100%);  
           background: radial-gradient(ellipse at center, #430d6d 0%, #000000 100%);  
           height: 100%;  
        } 
        .big{  
           -webkit-perspective: 1000px;  
           width: 20em;  
           height: 20em;  
           left: 50%;  
           top: 50%;  
           margin-left: -10em;  
           margin-top: -10em;  
           position: absolute;  
        }
        .box{  
            position: absolute;  
            width: 100%;  
            height: 100%;  
            -webkit-transform-style: preserve-3d;
            -webkit-transtion: all 2.5s;
            -webkit-animation: move 5s infinite linear;
       }  

       @keyframes move{
            50%{
                -webkit-transform: rotateX(360deg) rotateY(360deg);
            }
            100%{
                -webkit-transform: rotateX(720deg) rotateY(720deg);
            }
       }
  
       .box * {  
           background: -webkit-linear-gradient(left, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), -webkit-linear-gradient(top, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);  
           -webkit-background-size: 2.5em 2.5em;  
           background-color: rgba(0, 0, 0, 0.5);  
           position: absolute;  
           width: 100%;  
           height: 100%;  
           border: 2px solid rgba(54, 226, 248, 0.5);  
           -webkit-box-shadow: 0 0 5em rgba(0, 128, 0, 0.4);  
  
       } 
        section:first-child{
            -webkit-transform: translateZ(10em);
        }
        section:nth-child(2){
            -webkit-transform: rotateX(180deg) translateZ(10em); 
        }
        section:nth-child(3){
            -webkit-transform: rotateY(-90deg) translateZ(10em);
        }
        section:nth-child(4){
            -webkit-transform: rotateY(90deg) translateZ(10em); 
        }
        section:nth-child(5){
            -webkit-transform: rotateX(90deg) translateZ(10em);
        }
        section:last-child{
            -webkit-transform: rotateX(-90deg) translateZ(10em); 
        }
    </style>
</head>
<body>
    <div class="big">
        <div class="box">
            <section class="section1"></section>
            <section class="section2"></section>
            <section class="section3"></section>
            <section class="section4"></section>
            <section class="section5"></section>
            <section class="section6"></section>
        </div>
    </div>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容