3D动画的实现

最新推荐文章于 2024-07-18 16:42:05 发布

older-black

最新推荐文章于 2024-07-18 16:42:05 发布

阅读量673

点赞数 1

文章标签： css3 javascript 前端动画 3d

本文链接：https://blog.csdn.net/weixin_48879122/article/details/126540745

版权

1.单词解释

persepective n.视角,观点

origin n.起源

preserve v.维持维护

2.实现3d方式

3d元素最少需要三层的元素嵌套，或者说任意的三层嵌套的元素就可以通过设置css样式，使用户能够看到3d的图形。

实现方式具体方式：

该三层元素最外层的元素设置css样式

perspective：700px; 设置景深，单位px；景深可以理解为眼睛到物体的距离，距离越大，效果越不明显，建议设置为{200,1000}(正则写法)，即可模拟出3d效果；

perspective-origin: 0 0; 设置视线的原点,默认使50% 50%；

中间的元素设置css样式：

transform-style：preseve-3d；设置改变样式；默认是flat(2d效果)；preserve-3d是3d效果；

最内层元素

transform 最内层元素则可以通过设置transform设置改变的样式；transform具体能设置什么值，每个值又代表什么效果，则可以通过访问我之前的博格文章，文章网址为https://blog.csdn.net/weixin_48879122/article/details/126492732?spm=1001.2014.3001.5501查看；

3.一个3d效果的demo

<style>
        body {
            background-color: #000;
            perspective: 1000px;
        }

        .box {
            width: 300px;
            height: 300px;
            /* border: 1px solid #000; */
            margin: 200px auto;
            transform-style: preserve-3d;
            animation: rotate 10s linear infinite;
        }

        .item {
            width: 300px;
            height: 300px;
            /* border: 1px solid #000; */
            background-color: #fff;
            display: flex;
            position: absolute;
        }

        span {
            display: block;
            width: 60px;
            height: 60px;
            background-color: #000;
            border-radius: 50%;
        }

        .item1 {
            justify-content: center;
            align-items: center;
            transform: rotateX(-90deg) translateZ(-150px);
        }

        .item2 {
            justify-content: space-between;
            transform: translateZ(-150px);
        }
        .item2 span:nth-child(2){
            align-self: flex-end;
            
        }
        .item3{
            justify-content: space-between;
            transform: rotateY(-90deg) translateZ(150px);
        }
        .item3 span:nth-child(2){
            align-self: center;
        }
        .item3 span:nth-child(3){
            align-self: flex-end;
        }
        .item4{
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
            transform: rotateY(90deg) translateZ(150px);
        }
        .item4 span{
            margin: 45px;
        }
        .item5{
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
            transform: rotateX(90deg) translateZ(-150px);
        }
        .item5 span{
            margin: 45px;
        }
        .item5 span:nth-child(5){
            position: absolute;
            left: 70px;
            top: 70px;
        }
        .item6{
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
            transform: translateZ(150px);
        }
        .item6 span{
            margin: 20px;
        }
        @keyframes rotate {
            100%{
                /* transform: rotate3d(,360deg,360deg); */
                transform: rotateY(720deg)  rotateX(360deg) rotateZ(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="item item1">
            <span></span>
        </div>
        <div class="item item2">
            <span></span>
            <span></span>
        </div>
        <div class="item item3">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="item item4">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="item item5">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="item  item6">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

</body>