关于Transform属性值累加性问题

在逆战班学习了将近一个月了吧，想来说一下我在使用transform这个属性过程中总会忘记、总会在这里跌倒的问题（真的是一部辛酸史啊，老记不住，趁着现在记着赶紧记录下来）

关于css3的transform属性，是一个非常好用的属性，这个属性允许我们对元素进行位移（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）,用这个属性在结合一下:hover、:target伪类选择器可以完成一些比较简单的小动画（初入门来说感觉还是挺高大上的），接下来说一下很容易出错的一个地方就是上述这些属性值是没有累加性的，接下来以一个简单的小案例为例子说明一下。

这是一个关于鼠标移入立方体开盖的小案例

我想要让鼠标移入时，这个立方体上面打开，就是让2那个面竖起来，此时肯定会有人想了那就绕着2这个面最上边那个边逆时针旋转90度呗，但是如果这样想就错了，假设真的就按照上述的说法，绕着最上边逆时针旋转90度会有什么样的结果？结果如下

在这里插入图片描述

.box:hover .box2{transform: rotateX(90deg);}

为什么会出现这种原因呢？原因在于本来2这个面是正对着我们的，通过一次旋转将这个面旋转上去的，而且transform这个属性的属性值是没有累加性的，不是说第一次旋转90度，第二次在旋转90度就是180度了，这样一次旋转90度，无论旋转多少次都是90度，但是如果旋转180度会出现我们想要的效果
在这里插入图片描述

无论是位移、旋转、缩放还是倾斜都是这样，这个点很小，但是很容易出错。

下面附上这个小案例的源码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
   *{margin: 0;padding: 0;}
   body{transform-style: preserve-3d;}
   .box{width: 200px;height: 200px;background: rgba(0,0,0,0.5);margin: 300px auto;position: relative;transform-style: preserve-3d;transition: 2s;transform: rotateX(-20deg);}
   .box:hover{transform: rotateY(270deg);}
   .box:hover .box2{transform: rotateX(180deg);}
   .box div{width: 200px;height: 200px;font-size: 40px;color: #000;line-height: 200px;text-align: center;position: absolute;}
   /* 右面 */
   .box1{background: rgba(255,100,100,0.8);/* 旋转基线 */transform-origin: right center;transform: rotateY(90deg);}
   /* 上面 */
   .box2{background: rgba(255,200,100,0.8);transform-origin: top center;transform: rotateX(90deg);transition: 1s;}
   /* 左面 */
   .box3{background: rgba(25,100,200,0.8);transform-origin: left center; transform: rotateY(-90deg);}
   /* 下面 */
   .box4{background: rgba(200,200,100,0.8);transform-origin: bottom center;transform: rotateX(-90deg);}
   /* 前面 */
   .box5{background: rgba(25,10,100,0.8);transform: translateZ(200px);}
   .box6{background: rgba(205,10,150,0.8);transform: rotateY(180deg);}
  </style>
 </head>
 <body>
  <div class="box">
   <div class="box1">1</div>
   <div class="box2">2</div>
   <div class="box3">3</div>
   <div class="box4">4</div>
   <div class="box5">5</div>
   <div class="box6">6</div>
  </div>
 </body>
</html>

CSS3 Transform不得不说的一个小知识点

CSS3 Transform不得不说的一个小知识点

关于Transform属性值累加性问题

猜你喜欢