3D效果

作者: 楚乌 | 来源:发表于2016-11-19 14:13 被阅读0次

CSS3动画3D
css实现简单的3D效果
CSS 效果
ViewPager切换动画
Flutter 实现酷炫的3D效果
收集的两个动画，3d霓虹灯和在3d范围内的运动
PS样式3D城市背景效果
CSS3 - 3D位移
iOS Demo合集反弹的火球、若隐若现的电波、图像滚筒(3D
Web蓝天白云的极致体验

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>