【心得】会让人晕3D的transform

昨天有先提到了transform的位移与relative的差别了
那麽今天再来详细一些比较常使用的transform属性~
以及如果使用多个transform属性在动画上，顺序不同会发什麽事!!

常用属性介绍：

位移

transform: translate(x,y)
transform: translateX(单位)
transform: translateY(单位)

单位可以填绝对单位或 %
填写%时，移动的距离是以本身的宽/高乘以 %

例如在做绝对定位的垂直置中时，会利用translate(-50%,-50%)进行矫正
(translate是以物体本身的宽高进行移动~ -50%就是向左以及向上移动自身一半的距离)

  position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);

缩放

transform: scale(x倍数,y倍数)
更改x、y的比例可以将原本的正方形改成长方形
但里面的文字也会跟着比例缩放(扁掉或拉长)

其缩放都是在原地进行!并不会因此推挤到旁边的东西造成位移~
在做:hover效果的时候很好用

transform: scaleX(倍数)
transform: scaleY(倍数)

旋转

transform: rotateX(角度)
transform: rotateY(角度)

旋转的话会因为旋转的度数正负值而转向不一样

正值转向：

.item1{
  transform:rotateX(0deg);
  animation:turn1 5s linear infinite;
}
@keyframes turn1{
  0%{transform:rotateX(0deg)}
  100%{transform:rotateX(360deg)};
}
.item2{
  transform:rotateY(0deg);
  animation:turn2 5s linear infinite;
}
@keyframes turn2{
  0%{transform:rotateY(0deg)}
  100%{transform:rotateY(360deg)};
}

负值转向：

.item1{
  transform:rotateX(0deg);
  animation:turn1 5s linear infinite;
}
@keyframes turn1{
  0%{transform:rotateX(0deg)}
  100%{transform:rotateX(-360deg)};
}
.item2{
  transform:rotateY(0deg);
  animation:turn2 5s linear infinite;
}
@keyframes turn2{
  0%{transform:rotateY(0deg)}
  100%{transform:rotateY(-360deg)};
}

在动画上使用

如果同时需要用到位移+旋转+缩放
这样子写上面的会被最後一个覆盖掉
因此只有最後一个rotateX(角度)会作用!

transform: translate(x,y);
transform: scale(x倍数,y倍数);
transform: rotateX(角度);

需要这样写

transform: translate(x,y) scale(x倍数,y倍数) rotateX(角度);

没有动画时不需要拘泥於顺序，只需要用空白隔开属性

but~ 有动画效果时就要特别注意顺序问题罗!

.item1{
  background-color: #f66;
  transform:translateX(300px) rotateY(60deg);
  animation:item1 6s infinite;
}
.item2{
  background-color: #6f6; 
  transform:rotateY(60deg) translateX(300px) ;
  animation:item2 6s infinite;
}
@keyframes item1{
  0%{transform:translateX(0px) rotateY(0deg)}
  100%{transform:translateX(300px) rotateY(60deg)}
}
@keyframes item2{
  0%{transform:translateX(0px) rotateY(0deg)}
  100%{transform:rotateY(60deg) translateX(300px)}
}