css3-3D旋转立方体代码

最新推荐文章于 2022-12-23 21:08:33 发布

ccy607

最新推荐文章于 2022-12-23 21:08:33 发布

阅读量276

点赞数

文章标签： html 3d css3

本文链接：https://blog.csdn.net/ccy607/article/details/104587902

版权

变形属性：transform:属性值;

 形成一个3D舞台，让其子元素在3D快捷键里面进行一个变换
 transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。
     transform-style:preserve-3d/flat;    
         其中flat值为默认值，表示所有子元素在2D平面呈现。
         preserve-3d表示所有子元素在3D空间中呈现。

3D的功能函数：

     1.3D的位移：
         transform:translate(x,y,z);
             单一方向位移：
                 transform:translateX();
                 transform:translateY();
                 transform:translateZ();(不能设置成百分比)
     2.3D的旋转：
         transform:rotate();
             transform:ratateX() rotateY() rotateZ();
             单一方向选择：
                 transform:rotateX();
                 transform:rotateY();
                 transform:rotateZ();（和默认情况效果相似）
                 transform:rotate3D(x,y,z,a);(不常用)
                 x/y/z:取值0-1，用来描述元素围绕x/y/z旋转的矢量值（矩阵）
                     a：是一个角度值，主要用来指定元素在3D空间
                     旋转的角度，如果其值为正值，顺时针旋转，
                     反之逆时针旋转。

     3.3D的缩放：
         transform:scale(x,y,z);
             单一方向的缩放：
                 transform:scaleX();
                 transform:scaleY();
                 transform:scaleZ();
     
     4.背面不可见：backface-visibility:hidden;

3D旋转立方体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .box div{
            width: 200px;
            height: 200px;
            position: absolute;
            border:1px solid #ccc;
            /* 使背面不可见 */
            backface-visibility: hidden;
        }
        .box{
            width: 200px;
            height: 200px;
            position: fixed;
            left:0;right:0;
            top:0;bottom:0;
            margin:auto;
            /* 形成3d空间 */
            transform-style: preserve-3d;
            animation: box-move 12s linear infinite;
        }
        .box div img{
            width: 100%;
            height: 100%;
        }
        /* 右侧面 */
        .con1{
            transform-origin:right;
            transform:rotateY(90deg);
            background:red;
        }
        /* 做侧面 */
        .con2{
            transform-origin:left;
            transform:rotateY(-90deg);
            background:blue;
        }
        /* 上面 */
        .con3{
            transform-origin:top;
            transform:rotateX(90deg);
            background:green;
        }
        /* 下面 */
        .con4{
            transform-origin:bottom;
            transform:rotateX(-90deg);
            background:tomato;
        }
        /* 正面 */
        .con5{
            transform:translateZ(200px);
            background:orange;
        }
        .con6{
            transform:rotateY(180deg);
            background:yellow;
        }
        @keyframes box-move{
            100%{
                transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="con1"></div>
        <div class="con2"></div>
        <div class="con3"></div>
        <div class="con4"></div>
        <div class="con5"></div>
        <div class="con6"></div>
    </div>
</body>
</html>

ccy607

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3-3D旋转立方体代码

变形属性：transform:属性值; 形成一个3D舞台，让其子元素在3D快捷键里面进行一个变换 transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。 transform-style:preserve-3d/flat; 其中flat值为默认值，表示所有子元素在2D平面呈现。 preserve-3d...
复制链接

扫一扫