css3变形动画的一些基础知识

2024年4月29日 125次阅读来源: 666888

transform

rotate(180deg)2D旋转正值代表顺时针旋转180度，负值代表逆时针旋转，用法transform:rotate(180deg);
rotate3d(x,y,z,angle);3D旋转
1、x是0-1之间的数值，主要用来描述元素围绕X轴旋转的矢量值。
2、y是0-1之间的数值，主要用来描述元素围绕Y轴旋转的矢量值。
3、z是0-1之间的数值，主要用来描述元素围绕Z轴旋转的矢量值。
4、angle是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。
rotateX(180deg)3D旋转，元素围绕其X轴以给定的度数进行旋转。用法transform:rotateX(180deg);相当于transform:rotate3d(1,0,0,180deg)
rotateY(180deg)3D旋转，元素围绕其Y轴以给定的度数进行旋转，用法transform:rotateY(180deg);相当于transform:rotate3d(0,1,0,180deg)
rotateZ(180deg)3D旋转，元素围绕其Z轴以给定的度数进行旋转，用法transform:rotateZ(180deg);跟rotate(180deg)效果一样。相当于transform:rotate3d(0,0,1,180deg)

rotate用法：

<!DOCTYPE html>
<html>
  <head>
    <title>rotate</title>
    <style>
      div{
        width: 100px;
        height:100px;
        color: #fff;
        background: #f00;
        margin-bottom: 10px;
      }
      #div1,#div2,#div3,#div4,#div5{
        -ms-transition:-ms-transform 1s ease 0s;
        -moz-transition:-moz-transform 1s ease 0s;
        -webkit-transition:-webkit-transform 1s ease 0s;
        -o-transition:-o-transform 1s ease 0s;
        transition:transform 1s ease 0s;
      }
      #div1:hover{
        -ms-transform:rotateY(180deg);
        -moz-transform:rotateY(180deg);
        -webkit-transform:rotateY(180deg);
        -o-transform:rotateY(180deg);
        transform:rotateY(180deg);
      }
      #div2:hover{
        -ms-transform:rotateX(180deg);
        -moz-transform:rotateX(180deg);
        -webkit-transform:rotateX(180deg);
        -o-transform:rotateX(180deg);
        transform:rotateX(180deg);
      }
      #div3:hover{
        -ms-transform:rotateZ(180deg);
        -moz-transform:rotateZ(180deg);
        -webkit-transform:rotateZ(180deg);
        -o-transform:rotateZ(180deg);
        transform:rotateZ(180deg);
      }
      #div4:hover{
        -ms-transform:rotate3d(1,1,1,180deg);
        -moz-transform:rotate3d(1,1,1,180deg);
        -webkit-transform:rotate3d(1,1,1,180deg);
        -o-transform:rotate3d(1,1,1,180deg);
        transform:rotate3d(1,1,1,180deg);
      }
      #div5:hover{
        -ms-transform:rotate(180deg);
        -moz-transform:rotate(180deg);
        -webkit-transform:rotate(180deg);
        -o-transform:rotate(180deg);
        transform:rotate(180deg);
      }
    </style>
  </head>
  <body>
    <div id="div1">3D rotateY</div>
    <div id="div2">3D rotateX</div>
    <div id="div3">3D rotateZ</div>
    <div id="div4">3D rotate3d</div>
    <div id="div5">2D rotate</div>
  </body>
</html>

skew(45deg,45deg)2D斜切，代表水平方向和垂直方向同时扭曲45度。用法transform:skew(45deg,45deg);
skewX(45deg)2D斜切，代表水平方向扭曲45度。用法transform:skewX(45deg);
skewY(45deg)2D斜切，代表垂直方向扭曲45度。用法transform:skewY(45deg);

skew用法

<!DOCTYPE html>
<html>
  <head>
    <title>skew扭曲</title>
    <style>
      div{
        width: 100px;
        height: 100px;
        background: #f00;
        color: #fff;
        margin-bottom: 10px;
      }
      #div1,#div2,#div3{
        -ms-transition:-ms-transform 1s ease 0s;
        -moz-transition:-moz-transform 1s ease 0s;
        -webkit-transition:-webkit-transform 1s ease 0s;
        -o-transition:-o-transform 1s ease 0s;
        transition:transform 1s ease 0s;
      }
      #div1:hover{
        -ms-transform:skew(45deg,45deg);
        -moz-transform:skew(45deg,45deg);
        -webkit-transform:skew(45deg,45deg);
        -o-transform:skew(45deg,45deg);
        transform:skew(45deg,45deg);
      }
      #div2:hover{
        -ms-transform:skewX(45deg);
        -moz-transform:skewX(45deg);
        -webkit-transform:skewX(45deg);
        -o-transform:skewX(45deg);
        transform:skewX(45deg);
      }
      #div3:hover{
        -ms-transform:skewY(45deg);
        -moz-transform:skewY(45deg);
        -webkit-transform:skewY(45deg);
        -o-transform:skewY(45deg);
        transform:skewY(45deg);
      }
    </style>
  </head>
  <body>
    <div id="div1">skew</div>
    <div id="div2">skewX</div>
    <div id="div3">skewY</div>
  </body>
</html>

scale(1.5,0.5)2D缩放，代表水平方向缩放1.5，垂直方向缩放0.5。用法transform:scale(1.5,0.5);
scaleX(1.5)2D缩放，代表仅水平方向缩放1.5。用法transform.scaleX(1.5);
scaleY(0.5)2D缩放，代表垂直方向缩放0.5。用法transform.scaleY(0.5);
scaleX(1.5)3D缩放，代表仅水平方向缩放1.5。用法transform.scaleX(1.5);
scaleY(0.5)3D缩放，代表垂直方向缩放0.5。用法transform.scaleY(0.5);
scaleZ(0.5)3D缩放，代表z轴方向缩放0.5，如果是一个2D图看不出来效果。用法transform.scaleZ(0.5);

scale实现

<!DOCTYPE html>
<html>
  <head>
    <title>scale缩放</title>
    <style>
      div{
        width: 100px;
        height: 100px;
        background: #f00;
        color: #fff;
        margin-bottom: 10px;
      }
      #div1,#div2,#div3,#div4{
        -ms-transition:-ms-transform 1s ease 0s;
        -moz-transition:-moz-transform 1s ease 0s;
        -webkit-transition:-webkit-transform 1s ease 0s;
        -o-transition:-o-transform 1s ease 0s;
        transition:transform 1s ease 0s;
      }
      #div1:hover{
        -ms-transform:scale(0.5,0.5);
        -moz-transform:scale(0.5,0.5);
        -webkit-transform:scale(0.5,0.5);
        -o-transform:scale(0.5,0.5);
        transform:scale(0.5,0.5);
      }
      #div2:hover{
        -ms-transform:scaleX(0.5);
        -moz-transform:scaleX(0.5);
        -webkit-transform:scaleX(0.5);
        -o-transform:scaleX(0.5);
        transform:scaleX(0.5);
      }
      #div3:hover{
        -ms-transform:scaleY(0.5);
        -moz-transform:scaleY(0.5);
        -webkit-transform:scaleY(0.5);
        -o-transform:scaleY(0.5);
        transform:scaleY(0.5);
      }
      #div4:hover{
        -ms-transform:scaleZ(0.5);
        -moz-transform:scaleZ(0.5);
        -webkit-transform:scaleZ(0.5);
        -o-transform:scaleZ(0.5);
        transform:scaleZ(0.5);
      }
    </style>
  </head>
  <body>
    <div id="div1">scale</div>
    <div id="div2">scaleX</div>
    <div id="div3">scaleY</div>
    <div id="div4">scaleZ</div>
  </body>
</html>

translate(50px,100px)2D位移，代表水平方向向右移动50像素，垂直方向向下移动100像素。用法transform:translate(50px,100px);
translateX(50px)2D位移，代表水平方向向右移动50像素。transform:translateX(50px);
translateY(100px)2D位移，代表垂直方向向下移动100像素。用法transform:translateY(100px);
translate3d(x,y,z)3D位移，代表水平方向向右移动50像素，垂直方向向下移动100像素，z轴移动100像素。用法transform:translate3d(50px,100px,100px);
translateX(50px)3D位移，代表水平方向向右移动50像素。transform:translateX(50px);
translateY(100px)3D位移，代表垂直方向向下移动100像素。用法transform:translateY(100px);
translateZ(100px)3D位移，代表Z轴方向移动100像素。用法transform:translateZ(100px);

translate用法

<!DOCTYPE html>
<html>
  <head>
    <title>translate位移</title>
    <style>
      div{
        width: 100px;
        height: 100px;
        background: #f00;
        color: #fff;
        margin-bottom: 10px;
      }
      #div1,#div2,#div3,#div4,#div5{
        -ms-transition:-ms-transform 1s ease 0s;
        -moz-transition:-moz-transform 1s ease 0s;
        -webkit-transition:-webkit-transform 1s ease 0s;
        -o-transition:-o-transform 1s ease 0s;
        transition:transform 1s ease 0s;
      }
      #div1:hover{
        -ms-transform:translate(100px,100px);
        -moz-transform:translate(100px,100px);
        -webkit-transform:translate(100px,100px);
        -o-transform:translate(100px,100px);
        transform:translate(100px,100px);
      }
      #div2:hover{
        -ms-transform:translate3d(100px,100px,100px);
        -moz-transform:translate3d(100px,100px,100px);
        -webkit-transform:translate3d(100px,100px,100px);
        -o-transform:translate3d(100px,100px,100px);
        transform:translate3d(100px,100px,100px);
      }
      #div3:hover{
        -ms-transform:translateX(100px);
        -moz-transform:translateX(100px);
        -webkit-transform:translateX(100px);
        -o-transform:translateX(100px);
        transform:translateX(100px);
      }
      #div4:hover{
        -ms-transform:translateY(100px);
        -moz-transform:translateY(100px);
        -webkit-transform:translateY(100px);
        -o-transform:translateY(100px);
        transform:translateY(100px);
      }
      #div5:hover{
        -ms-transform:translateZ(100px);
        -moz-transform:translateZ(100px);
        -webkit-transform:translateZ(100px);
        -o-transform:translateZ(100px);
        transform:translateZ(100px);
      }
    </style>
  </head>
  <body>
    <div id="div1">translate</div>
    <div id="div2">translate3d</div>
    <div id="div3">translateX</div>
    <div id="div4">translateY</div>
    <div id="div5">translateZ</div>
  </body>
</html>

matrix(a,b,c,d,e,f)矩阵，具体暂不深入了解，等其他的用熟练之后再深入了解
transform-origin: left top;修改中心点为左上角，相当于transform-origin: 0 0;右下角transform-origin: right bottom;相当于transform-origin: 100% 100%;

如果我们同时需要进行多个变形，我们可以这样写

transform:rotate(360deg) scale(1.2,1.2);

transition

在CSS中创建简单的过渡效果可以从以下几个步骤来实现：
第一，在默认样式中声明元素的初始状态样式；
第二，声明过渡元素最终状态样式，比如悬浮状态；
第三，在默认样式中通过添加过渡函数，添加一些不同的样式。

transition-property:指定过渡或动态模拟的CSS属性，我们也可以写all或者直接不写，代表过渡所有的属性。
transition-duration:指定完成过渡所需的时间，完成一次动画所需时间
transition-timing-function:指定过渡函数，动画播放方式
transition-delay:指定开始出现的延迟时间，如果没有延迟我们可以用0s或者直接不写。
transition: background-color .5s ease .1s;总和写法

transition使用方法

div {
  width: 200px;
  height: 200px;
  background-color:red;
  margin: 20px auto;
  -webkit-transition: background-color .5s ease .1s;
  transition: background-color .5s ease .1s;
}
div:hover {
  background-color: orange;
}

上面内容也可以写成下面样式

div {
  width: 200px;
  height: 200px;
  background-color:red;
  margin: 20px auto;
  -ms-transition-property:background-color;
  -moz-transition-property:background-color;
  -webkit-transition-property:background-color;
  -o-transition-property:background-color;
  transition-property:background-color;
  -ms-transition-duration: .5s;
  -moz-transition-duration: .5s;
  -webkit-transition-duration: .5s;
  -o-transition-duration: .5s;
  transition-duration: .5s;
  -ms-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -ms-transition-delay: .2s;
  -moz-transition-delay: .2s;
  -webkit-transition-delay: .2s;
  -o-transition-delay: .2s;
  transition-delay: .2s;
}
div:hover {
  background-color: orange;
}

在transiton中我们可以给多个属性加动画，下面是加动画的几种方式。

第一种:
transition:all 1s ease 1s;
第二种：
transition:width 1s,height 2s,color 3s;
第三种：
transition:width 1s;
transition:height 2s;
transition:color 3s;

@keyframes animation

@keyframes被称为关键帧，其类似于flash中的关键帧。常用方式

@keyframes changecolor{
  0%{
   background: red;
  }
  50%{
    background: green;
  }
  100%{
    background: green;
  }
}

或者

@keyframes changecolor{
  from{
   background: red;
  }
  to{
    background: green;
  }
}

animation-name: none指定@keyframes创建的动画名，当为none时，将没有任何动画效果，可以用于覆盖任何动画。
animation-duration:指定完成过渡所需的时间，完成一次动画所需时间
animation-timing-function指定过渡函数，动画播放方式
animation-delay指定开始出现的延迟时间
animation-iteration-count:1;指定播放次数，如果值为infinite动画将会无限次的播放
animation-direction:normal/alternate动画播放的方向
animation-play-state:running/paused动画播放的状态，正在播放/暂停。其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。
animation-fill-mode 定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。

1.none默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处。
2.forwards表示动画在结束后继续应用最后的关键帧的位置。
3.backwards会在向元素应用动画样式时迅速应用动画的初始帧。
4.both元素动画同时具有forwards和backwards效果

    原文作者：666888
    原文地址: https://segmentfault.com/a/1190000016296015
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。