css3 transform的matrix 深入理解

最新推荐文章于 2025-04-25 13:30:05 发布

珍珠奶茶爱好者

最新推荐文章于 2025-04-25 13:30:05 发布

阅读量895

点赞数

分类专栏： css

css 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了CSS3中matrix变换函数的使用方法，包括其六个参数的具体含义及其如何应用于图形的平移变换。此外，还探讨了CSS3中的3D变换，如rotateX(), rotateY()等方法，并通过实例展示了这些变换在网页设计中的应用。

计算matrix() , 理解各个参数

matrix(a,b,c,d,e,f)有六个参数，这六个参数对应到矩阵如下：

在图形学上，这种叫做齐次坐标矩阵，用齐次坐标矩阵和图形的顶点相乘，就能得到变换后的新顶点的位置。比如，图形有一个顶点（a，b），现使图形整体延x轴平移100px，平移后该顶点的位置应该是（a+100，b）。很明显，下面的矩阵运算就表示了这个过程：

因此，知道了这个齐次坐标矩阵，就可以算出任何一点变换后的位置，所以，这个齐次坐标矩阵就是变换矩阵。

如果该点再次延y轴平移100px，平移后的新位置应该是（a+100,b+100）,则整个过程可表示成：

例如：

我要实现如下图的效果（a=1,b=1,c=0,d=1,e=100,f=100），css如下

 #box6{
            -webkit-transform: matrix(1, 1, 0, 1, 100, 100);
            transform: matrix(1, 1, 0, 1, 100, 100);
        }

css3 的3D转换

rotateX() 方法：元素围绕其 X 轴以给定的度数进行旋转

rotateY() 旋转：元素围绕其 Y 轴以给定的度数进行旋转。

注意：实现3D效果需要将X,Y,Z方结合起来

<!-- Rotate-->
<div class="card">
  <div class="box rotate">
    <div class="fill"></div>
  </div>
  <p>rotate(45deg) 1 </p>
</div>
<div class="card">
  <div class="box rotateX">
    <div class="fill"></div>
  </div>
  <p>rotateX(45deg)2</p>
</div>
<div class="card">
  <div class="box rotateY">
    <div class="fill"></div>
  </div>
  <p>rotateY(45deg)3</p>
</div>
<div class="card">
  <div class="box rotateZ">
    <div class="fill"></div>
  </div>
  <p>rotateZ(45deg) 4 </p>
</div>

css代码：

    display: inline-block;
            margin: 10px;
            background: #fff;
            padding: 15px;
            min-width: 200px;
            box-shadow: 0 3px 5px #ddd;
            color: #555;
        }
        .card .box {
            width: 100px;
            height: 100px;
            margin: auto;
            background: #ddd;
            cursor: pointer;
            box-shadow: 0 0 5px #ccc inset;
        }
        .card .box .fill {
            width: 100px;
            height: 100px;
            position: relative;
            background: #03A9F4;
            opacity: .5;
            box-shadow: 0 0 5px #ccc;
            -webkit-transition: 0.3s;
            transition: 0.3s;
        }
        .card p {
            margin: 25px 0 0;
        }