css 3D动画

一、今天让我们来学习一下css 3D吧！

1.首先我们要学习好css3 3d一定要有一定的立体感！

2.再来那就聊聊原理吧！

3.css3 3d 顾名思义是由两个2d名片组成的但不是让你建立连个2d啊！

一个div要想又3d效果那就得在最外层建立一个3d平面.
transform-style: preserve-3d; 3d空间
perspective: 800px; 它被成为视距或者紧身.
但是要是相对与body是不是也得给div上一层也得加一个紧身呢！
有了3d效果是不是的有一个像眼镜一样的东西呢在不同的地方显示的效果也是不一样的
perspective-origin:50% 50%; 这就是你的眼镜啦位置不同效果也就不用了
这样我们的3d空间就已经建立成了。

4、3d无非就是通过X Y Z轴来进行操作

rotateX/rotateY/rotateZ可以帮助理解三维坐标
translateZ则可以帮你理解透视位置。
transform-origin我们成为基点在水平方向改变观看div的位置
scale 缩放 rotate 旋转 translate移动 skew倾斜通过这些来进行3d效果

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>正方体</title>

    <style>

        .container{

            width: 1300px;

            height: 630px;

            background: #000;

            perspective: 8000px;

            border: 1px solid #000;

            perspective-origin: -20% 60%;

        }

        .cube{

            transform-style: preserve-3d;

            width: 100px;

            height: 100px;

            position: relative;

            margin:  300px auto;

            transform: rotateX(30deg) rotateY(0deg);

        }

        .cube:hover{

            animation: zuan 6s linear infinite;

        }

        @keyframes zuan{

            0%{

                transform: rotateX(0) rotateY(0deg);

            }

            100%{

                transform: rotateX(360deg) rotateY(360deg);

            }

        }

        .xiao{

            position: absolute;

            transform-style: preserve-3d;

            width: 50px;

            height: 50px;

            /* transform: rotateX(30deg); */

            position: relative;

        }

        .box{

            width: 50px;

            height: 50px;

            background: rgb(18, 238, 238);

            position: absolute;

            border: 1px solid #000;

            color: #fff;

            text-align: center;

            line-height: 50px;

        }

        .box1{

            transform: rotateX(-90deg) translateZ(25px);

        }

        .box2{

            transform: rotateX(90deg) translateZ(25px);

        }

        .box3{

            transform: rotateY(90deg) translateZ(25px);

        }

        .box4{

            transform: rotateY(-90deg) translateZ(25px);

        }

        .box5{

            transform:translateZ(25px);

        }

        .box6{

            transform: rotateY(-180deg) translateZ(25px);

        }

        .da{

            position: absolute;

            transform-style: preserve-3d;

            width: 100px;

            height: 100px;

            /* transform: rotateX(30deg); */

            position: relative;

        }

        .btn{

            width: 100px;

            height: 100px;

            background: rgba(149, 207, 12, 0.925);

            position: absolute;

            border: 1px solid #000;

            color: #fff;

            text-align: center;

            line-height: 100px;

        }

        .btn1{

            transform: rotateX(90deg) translateZ(150px) translateX(-25px);

        }

        .btn2{

            transform: rotateX(-90deg) translateZ(0) translateX(-25px);

        }

        .btn3{

            transform: rotateY(-90deg) translateZ(100px) translateY(-75px);

        }

        .btn4{

            transform: rotateY(90deg) translateZ(50px) translateY(-75px);

        }

        .btn5{

            transform: translateZ(75px)  translateX(-25px) translateY(-75px);

        }

        .btn6{

            transform: rotateY(180deg) translateZ(75px) translateX(25px)  translateY(-75px);

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="cube">

            <div class="xiao">

                <div class="box box1">too</div>

                <div class="box box2">bottom</div>

                <div class="box box3">left</div>

                <div class="box box4">right</div>

                <div class="box box5">before</div>

                <div class="box box6">after</div>

            </div>

            <div class="da">

                <div class="btn btn1">top</div>

                <div class="btn btn2">bottom</div>

                <div class="btn btn3">left</div>

                <div class="btn btn4">right</div>

                <div class="btn btn5">before</div>

                <div class="btn btn6">after</div>

            </div>

        </div>

    </div>

</body>

</html>

代码如下：
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>星球</title>

<style>

    .container{

        width: 100vw;

        height: 100vh;

        background: black;

        border: 1px solid transparent;

        overflow: hidden;

        background-size: 100%;

    }

    .cube{

        width: 520px;

        height: 520px;

        margin:0 auto;

        position: relative;

        border:1px solid #fff;

        border-radius: 50%;

        padding: 60px;

    }

    .cube::after{

        width: 30px;

        height: 30px;

        border-radius: 50%;

        content: "";

        display: block;

        background: rgba(255, 255, 1, 0.952);

        position: absolute;

        left: -15px;

        top: 305px;

        transform-origin: 335px;

        animation: zhuan 4s linear infinite;

    }

    @keyframes zhuan{

        0%{

            transform: rotate(0);

        }

        100%{

            transform: rotate(-360deg);

        }

    }

    .mian{

        width: 440px;

        height: 440px;

        border-radius: 50%;

        border:1px solid #FFF;

        position: relative;

        padding: 40px;

    }

    .diqiu{

        width: 16px;

        height: 16px;

        background: blueviolet;

        border-radius: 50%;

        position: absolute;

        top: 213px;

        left: -46px;

        transform-origin: 268px;

        animation: zhuan 5s linear infinite;

        position: relative;

    }

    .yueliang{

        width: 8px;

        height: 8px;

        background: #fff;

        border-radius: 50%;

        position: absolute;

        left: -15px;

        top: 4px;

        transform-origin: 24px;

         animation: zhuan 1s linear infinite;

    }

    .er{

        width:380px;

        height: 380px;

        border: 1px solid #fff;

        border-radius: 50%;

        left: 30px;

        top: 20px;

        position: relative;

    }

    .dou{

        width: 20px;

        height: 20px;

        background: rgb(156, 48, 102);

        border-radius: 50%;

        position: absolute;

        top: 180px;

        left: -10px;

        transform-origin: 200px;

        animation: zhuan 6s linear infinite;

    }

    .yan{

        width: 80px;

        height: 80px;

        background: orangered;

        border-radius: 50%;

        position: absolute;

        left: 161px;

        top: 161px;

        box-shadow: 0 0 50px gold;

    }

</style>

</head>
<body>
<div class="container">

<div class="cube">

    <div class="mian">

        <div class="diqiu">

            <div class="yueliang"></div>

        </div>

        <div class="er">

            <div class="dou">

            </div>

            <div class="yan">

            </div>

        </div>

    </div>

</div>

</div>

</body>
</html>

巴特西

css 3D动画

一、今天让我们来学习一下css 3D吧！

1.首先我们要学习好css3 3d一定要有一定的立体感！

2.再来那就聊聊原理吧！

3.css3 3d 顾名思义是由两个2d名片组成的但不是让你建立连个2d啊！

4、3d无非就是通过X Y Z轴来进行操作

持续更新，欢迎大家收藏指教！

最新文章

热门文章

巴特西

css 3D动画

一、今天让我们来学习一下css 3D吧！

1.首先我们要学习好css3 3d一定要有一定的立体感！

2.再来那就聊聊原理吧！

3.css3 3d 顾名思义是由两个2d名片组成的 但不是让你建立连个2d啊！

4、3d无非就是通过X Y Z轴来进行操作

持续更新，欢迎大家收藏指教！

最新文章

热门文章

3.css3 3d 顾名思义是由两个2d名片组成的但不是让你建立连个2d啊！