3D动画

最新推荐文章于 2022-08-01 16:01:23 发布

莓莓儿～

最新推荐文章于 2022-08-01 16:01:23 发布

阅读量8.6k

点赞数

分类专栏： CSS 文章标签： css3

本文链接：https://blog.csdn.net/fanfan_h/article/details/89975948

版权

CSS 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

3D 转换方法：
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
语法
transform-style:preserve-3d；
转换属性

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	改变被转换元素的位置。
transform-style	规定被嵌套元素如何在 3D 空间中显示。

一个3D动画

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {

            width: 100%;
            height: 100%;
            background: #e860fa;
        }
        .sqpar{
            margin:50px auto;
            position: relative;
            width: 300px;
            height: 300px;
            animation: sq_animate 3s linear infinite;
            transform-style:preserve-3d;  /*2d转3d*/
        }
        @keyframes sq_animate {
            from {
                transform: rotatey(0deg);
            }
            to{
                transform: rotatey(360deg);
            }
        }
        .sq{
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            border: 1px dashed #fff;
        }
        .sq1{
            transform: rotatey(0deg);
        }
        .sq2{
            transform: rotatey(30deg);
        }
        .sq3{
            transform: rotatey(60deg);
        }
        .sq4{
            transform: rotatey(90deg);
        }
        .sq5{
            transform: rotatey(120deg);
        }
        .sq6{
            transform: rotatey(150deg);
        }
    </style>
</head>
<body>
  <div class="sqpar">
      <div class="sq sq1"></div>
      <div class="sq sq2"></div>
      <div class="sq sq3"></div>
      <div class="sq sq4"></div>
      <div class="sq sq5"></div>
      <div class="sq sq6"></div>
      <div class="sq sq7"></div>
      <div class="sq sq8"></div>
  </div>
</body>
</html>

效果是镂空的球体一直旋转的。

莓莓儿～

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
3D动画

3D 转换方法：rotateX(angle) 定义沿 X 轴的 3D 旋转。rotateY(angle) 定义沿 Y 轴的 3D 旋转。rotateZ(angle) 定义沿 Z 轴的 3D 旋转。语法transform-style:preserve-3d；转换属性属性描述transform向元素应用 2D 或 3D 转换。transform-origin...
复制链接

扫一扫