c3 3D效果

transfrom 3D效果

1. perspective: 400px; 先给父元素设置景深：眼睛距离舞台的位置

2.反面效果：/* backface-visibility:hidden

设置元素背面是否可见

visible:可见;

hidden:不可见;*/

transform-style: preserve-3d;

flat:平面2D显示;

transform: 旋转

rotate(30deg) ：定义2D旋转，参数角度

rotateX()定义沿着X轴的3D旋转正值:向后躺负值:向前趴

rotateY()定义沿着Y轴的3D旋转正值:向里转负值:向外转

rotateZ()定义沿着Z轴的3D旋转

none:不旋转

perspective 景深:眼睛距离舞台的距离 3D变形要有舞台概念，添加景深，单位是px

度数:正值是顺时针转负值是逆时针转

缩放： scale() scaleX() scaleY() 度数:大于1是放大,小于1是缩小

变形斜切：skew(x,y)：定义沿着X轴和Y轴的2D斜切转换

skewX()：定义沿着X轴的2D斜切转换

skewY()：定义沿着Y轴的2D斜切转换

第一个参数表示横向斜切第二个参数表示纵向斜切

移动：translateX()：定义对象x轴的平移

translateY()：定义对象Y轴的平移

translateZ()：定义对象Z轴的放大缩小，效果和scale相同

transform-style: 设置组合体的显示方式:

flat:平面2D显示;

preserve-3d:立体3D显示多个形变用空格隔开

参考位置：transform-origin 属性允许改变被转换元素的参考位置

设置旋转轴

第一个参数是横向位置(具体尺寸0px/方向描述性参数：left/right/bottom/top/center/还可以用百分比)

第二个参数是纵向位置

left top 相当于 0 0

top center 相当于 0 50%

right top 相当于 100% 0

沿x轴转 : top:0% center:50% bottom:100%;

沿y轴转 : left:0% center:50% right:100%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>老铁没毛病</title>
</head>
    <style>

            body{
                perspective: none;
                /*perspective-origin: 10% 10%;*/
            }
        
        .div1{
            width: 300px;
            height: 300px;
            /*添加图片*/
            background-image:url(1.jpg);
            /*让图片填满*/
            background-size:cover;
            position: absolute;
            left: 800px;
            top: 300px;
            transition: translateX(0px) translateX(-50%) rotateY(-10deg);
            animation: run 10s forwards infinite; 
                        /*旋转*/
        /*    transform: rotateY(60deg) translateZ(100px);*/
            
        }

        .div2{
            width: 300px;
            height: 300px;
            /*添加图片*/
            background-image:url(1.jpg);
            /*让图片填满*/
            background-size:cover;
            position: absolute;
            left: 800px;
            top: 300px;
                        /*旋转*/
        /*    transform: rotateY(60deg) translateZ(100px);*/
            animation: runl 10s forwards infinite; 
        }


        .div3{
            width: 300px;
            height: 300px;
            /*添加图片*/
            background-image:url(1.jpg);
            /*让图片填满*/
            background-size:cover;
            position: absolute;
            left: 800px;
            top: 300px;
                        /*旋转*/
        /*    transform: rotateY(60deg) translateZ(100px);*/
            animation: runi 10s forwards infinite; 
        }    
        
        .div4{
            width: 300px;
            height: 300px;
            /*添加图片*/
            background-image:url(1.jpg);
            /*让图片填满*/
            background-size:cover;
            position: absolute;
            left: 800px;
            top: 300px;
                        /*旋转*/
        /*    transform: rotateY(60deg) translateZ(100px);*/
            animation: runp 10s forwards infinite; 
        }    

        .div5{
            width: 300px;
            height: 300px;
            /*添加图片*/
            background-image:url(1.jpg);
            /*让图片填满*/
            background-size:cover;
            position: absolute;
            left: 800px;
            top: 300px;
                        /*旋转*/
        /*    transform: rotateY(60deg) translateZ(100px);*/
            animation: runa 10s forwards infinite; 
        }    
        
        .div6{
            width: 300px;
            height: 300px;
            /*添加图片*/
            background-image:url(1.jpg);
            /*让图片填满*/
            background-size:cover;
            position: absolute;
            left: 800px;
            top: 300px;
                        /*旋转*/
        /*    transform: rotateY(60deg) translateZ(100px);*/
            animation: runy 10s forwards infinite; 
        }    

        
        @keyframes runa{
            0%{

                transform: rotateY(240deg) translateZ(500px);
            }

            100%{
                transform: rotateY(600deg) translateZ(500px);
            }
        }


        @keyframes runy{
            0%{

                transform: rotateY(300deg) translateZ(500px);
            }

            100%{
                transform: rotateY(660deg) translateZ(500px);
            }
        }





        @keyframes runp{
            0%{

                transform: rotateY(180deg) translateZ(500px);
            }

            100%{
                transform: rotateY(540deg) translateZ(500px);
            }
        }

    





            @keyframes runi{
            0%{

                transform: rotateY(120deg) translateZ(500px);
            }

            100%{
                transform: rotateY(480deg) translateZ(500px);
            }
        }

    




            @keyframes runl{
            0%{

                transform: rotateY(60deg) translateZ(500px);
            }

            100%{
                transform: rotateY(420deg) translateZ(500px);
            }
        }


        @keyframes run{
            0%{

                transform: rotateY(0deg) translateZ(500px);
            }

            100%{
                transform: rotateY(360deg) translateZ(500px);
            }
        }

    </style>
<body>

    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
    <div class="div6"></div>

</body>
</html>

效果图

transfrom 3D效果

猜你喜欢