0722 transform 3d

m0_56381561

于 2022-07-22 20:28:54 发布

阅读量54

点赞数

文章标签： 3d html css

本文链接：https://blog.csdn.net/m0_56381561/article/details/125939373

版权

在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

语法

transform ： none | [ ]* 也就是： transform: rotate | scale | skew | translate |matrix;

一、旋转rotate

rotate() ：通过指定的角度参数对原元素指定一个2D rotation（2D 旋转），需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg):

二、移动translate

移动translate我们分为三种情况：translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动），

三、缩放scale

缩放scale和移动translate是极其相似，他也具有三种情况：scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）；scaleX(x)元素仅水平方向缩放（X轴缩放）；scaleY(y)元素仅垂直方向缩放（Y轴缩放），但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。

四、扭曲skew

扭曲skew和translate、scale一样同样具有三种情况：skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

五、矩阵matrix

matrix(, , , , , ) ：以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）

3D

transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d。transform-style属性

中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。

也就是说，如果对一个元素设置了transform-style的值为flat，则该元素的所有子元素都将被平展到该元素的2D平面中进行呈现。沿着X轴或Y轴方向旋转该元素将导致位于正或负Z轴位置的子元素显示在该元素的平面上，而不是它的前面或者后面。如果对一个元素设置了transform-style的值为preserve-3d，它表示不执行平展操作，他的所有子元素位于3D空间中。

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html {
            width: 100%;
            height: 100%;
        }
        
        body {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        section {
            width: 150px;
            height: 150px;
            position: relative;
            animation: rate 4s linear infinite;
            transform-style: preserve-3d;
        }
        
        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #fff;
        }
        
        section div:nth-child(1) {
            transform: translateZ(75px);
        }
        
        section div:nth-child(2) {
            transform: rotateY(-90deg) translateZ(75px);
        }
        
        section div:nth-child(3) {
            transform: rotateY(180deg) translateZ(75px);
        }
        
        section div:nth-child(4) {
            transform: rotateY(90deg) translateZ(75px);
        }
        
        section div:nth-child(5) {
            transform: rotateX(90deg) translateZ(75px);
        }
        
        section div:nth-child(6) {
            transform: rotateX(-90deg) translateZ(75px);
        }
        
        .c1 {
            background-color: coral;
            /* display: flex;
            justify-content: space-between; */
        }
        
        .c2 {
            background-color: cadetblue;
        }
        
        .c3 {
            background-color: cornflowerblue;
        }
        
        .c4 {
            background-color: chartreuse;
        }
        
        .c5 {
            background-color: crimson;
        }
        
        .c6 {
            background-color: cyan;
        }
        
        @keyframes rate {
            from {
                transform: rotateY(0) rotateX(0);
            }
            to {
                transform: rotateY(360deg) rotateX(360deg);
            }
        }
        
        span {
            display: inline-block;
            height: 48px;
            width: 48px;
            background-color: transparent;
            border: 1px solid red;
            float: right;
        }
    </style>
</head>

<body>
    <section>
        <div class="c1">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>

        </div>
        <div class="c2">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="c3">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="c4">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="c5">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="c6">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </section>
</body>

</html>

效果：