css3变形 transform中复合写法的注意问题总结

最新推荐文章于 2024-04-03 17:45:26 发布

Rainbow~小二

最新推荐文章于 2024-04-03 17:45:26 发布

阅读量2.1k

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/weixin_43720739/article/details/105012798

版权

我们知道在css3中我们利用transform变形可以使我们的网页动起来,其中有各个属性，例如translate、scale、rotate、skew等属性。但是当我们使用多个变形属性的复合写法时，遇到一些自己所理解不了的问题，下面我就来总结一些出现的问题。
上代码：
初始状态的三个盒子

<!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>
      .box1 {
        width: 100px;
        height: 100px;
        margin-top: 100px;
        background: red;
      }
      .box2 {
        width: 100px;
        height: 100px;
        margin-top: 100px;
        background: red;
      }
      .box3 {
        width: 100px;
        height: 100px;
        margin-top: 100px;
        background: red;
      }
    </style>
  </head>
  <body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
  </body>
</html>

效果图如下：
效果图1
给box1和box2添加变形属性

<!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>
      .box1 {
        width: 100px;
        height: 100px;
        margin-top: 100px;
        background: red;
      }
      .box2 {
        width: 100px;
        height: 100px;
        margin-top: 100px;
        background: red;
        transform: translateX(100px) scale(0.5);
      }
      .box3 {
        width: 100px;
        height: 100px;
        margin-top: 100px;
        background: red;
        transform: scale(0.5) translateX(100px);
      }
    </style>
  </head>
  <body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
  </body>
</html>

效果如下：
效果图2
我们先来解释一下box2和box3都做了怎样的变形
box2首先由100px缩放0.5，变成了50px，然后向右位移了100px；
box3首先应该向右位移100px，但实际是由于translate属性前有scal属性所影响，box3是向右位移了50px。
从上边的代码以及效果图我们可以看出，当我们使用复合写法时，缩放与位移的顺序不同，就出现了两个完全不同的效果。这个就是其中的问题之一。这其实时与复合写法的变形属性有关，transform的执行顺序是：先执行后写的属性，再执行前边所写的属性；而且translate属性会受到scale、rotate、skew属性的影响。
这只是一个简单的例子，如果需要了解更多，需要自己多动手试试其他的属性，看看会出现怎样的效果！