CSS变形与动画

盒子爱上猫

新晋铲屎官一枚

本文原载于简书，作者 _YM雨蒙（饥人谷学员），转载已获作者授权。

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

正文如下。

变形与动画是 css3 中的知识,但是一直都掌握的不是很熟练,今天就把它彻底的过一遍。

变形

CSS transform 属性允许你修改CSS视觉格式模型的坐标空间。使用它，元素可以被 转换（translate） 、 旋转（rotate） 、 缩放（scale） 、 倾斜（skew） 。
CSS transform 属性 , 只对 block 级元素生效！

transform 语法

transform:none | <transform-function> +

初始值为 none
fucntion可以为哪些值?
语法 + 表示可以写多个

/* Function values */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);

transform有很多值可以使用,我们看一下具体有那些值,该怎么使用

transform:rotate(<angle>)

angle: 角度

transform:rotate(45deg)  //顺时针旋转
transform:rotate(-60deg)  //逆时针旋转
.demo pre{
  transform:rotate(45deg);
  font-size:200px;
  line-height:300px;
  text-align:center;
<div class="demo">
    <pre>C</pre>
</div>

transform:translate(x轴 y轴(可不写))

transform:translateX()
transform:translateY()
单位 px % 等

transform:translate(20px,50px)  //中间用逗号隔开
transform:translate(-40px,20%)
transform:translate(100px)  //只表示x轴偏移
transform:translateX(20%)
transform:translateY(20%)

transform:scale()

scale:(<number>[,<number>]?)
scaleX()
scaleY()

transform:scale(1.2,2)  //x轴放大1.2倍 y轴放大2倍
transform:scale(1.2)  // x轴 y轴都放大1.2倍
transform:scaleX(1.2)  //x轴放大1.2倍
transform:scaleY(1.2)

transform:skew(<angle>[,<angle>]?)

skewX(<angle>)
skewY(<angle>)
X轴倾斜多少度,Y轴倾斜多少度

transform:skew(30deg)  //y轴向x轴倾斜了30deg
transform:skew(30deg,30deg)  //y轴向x轴倾斜了30deg x轴也向y轴偏移30deg
transform:skewX(45deg)
transform:skewY(60deg)

从上面我们学到了很多变形技巧:rotate tranlate scale skew,我们不仅可以一个个使用,也可以组合使用

transform:translate(50px) scale(1.5);
transform:translate(50px) skew(120deg);

transform-origin:

transform-origin CSS属性让你更改一个元素变形的原点
默认值:50% 50% 0

/* 单值语法 */
transform-origin: 2px;
transform-origin: bottom;
/* 双值语法 */ /* 用两个数字值先水平后垂直，用一个数值一关键字或两关键字不强求顺序 */
transform-origin: 3cm 2px;   /* x-offset y-offset */
transform-origin: 2px left;  /* y-offset x-offset-keyword */
transform-origin: left 2px;  /* x-offset-keyword y-offset */
transform-origin: right top; /* x-offset-keyword y-offset-keyword */
transform-origin: top right; /* y-offset-keyword x-offset-keyword */ /* 三值语法 */
x方向  y 方向  z方向
transform-origin: 2px 30% 10px;     /* x-offset y-offset z-offset */
transform-origin: 2px left 10px;    /* y-offset x-offset-keyword z-offset */
transform-origin: left 5px -3px;    /* x-offset-keyword y-offset z-offset */
transform-origin: right bottom 2cm; /* x-offset-keyword y-offset-keyword z-offset */
transform-origin: bottom right 2cm; /* y-offset-keyword x-offset-keyword z-offset */

之前我们了解的都是绕着Z轴旋转,可不可以绕Y轴 X轴旋转呢?我们来学习新的属性

perspective: none | <length>

透视效果
length 用户到z = 0平面的距离。它用于将透视变换应用于元素及其内容

/* Keyword value */ 
perspective: none;
/* <length> values */ 
perspective: 20px;  
perspective: 3.5em;

perspective-origin透视角度

perspective-origin:50% 50% 默认值

/* One-value syntax */
perspective-origin: x-position;
perspective-origin: left
/* Two-value syntax */
perspective-origin: x-position y-position;
perspective-origin: left center
perspective-origin: bottom 300px
/* When both x-position and y-position are keywords,
   the following is also valid */
perspective-origin: y-position x-position;
/* css */
perspective:2000px;  //修改会有不同的视角
perspective-origin:50% 50%;

在上面的了解我们只是对css元素在2d平面上的移动,倾斜,缩放,那如何在3d上动作呢?css属性又有哪些呢?

transform:translate3d(x, y, z)

属性和 translate() 差不多,只不过多了一个z轴上的变换
也多了 translateZ()

transform:translate3d(10px,20%,200px)
transform:translateX(10px) transform:translateY(20%)
transform:translateZ(200px)

transform:scale3d(x, y, z<number>)

3d上的缩放

transform:scale3d(1.2,1.2,1); //x,y轴变大1.3倍,z不变
transform:scaleZ(5)  //并不会影响盒子的大小

transform:rotate3d(<number>,<number>,<number>,<angle>)

rotateZ(<angle>) z轴上旋转

transform:rotate3d(0,0,1,45deg)  //0,0,1表示在z轴上旋转 ,z轴上的1与坐标原点连接
transform:rotate3d(0,1,0,45deg)  //表示在y轴上
transform:rotate3d(1,0,0,45deg)  //表示在x轴上
transform:rotate3d(1,1,1,45deg)  //在坐标为1,1,1与坐标原点连接线上旋转

我们有一个新的属性需要学习一下

transform-style:flat | preserver-3d

flat 扁平化默认值
preserve-3d 保留3d空间

transform-style:flat 
transform-style:preserve-3d

背面不可见怎么办?

backface-visibility:visible | hidden

visible:背面可见

backface-

过渡效果

transition-property:none | <single-transition-property>

<single-transition-property> = all | IDENT
none 没有过渡动画
all 所有可被动画的属性都表现出过渡动画
IDENT 属性名称。由小写字母 a 到 z，数字 0 到 9，下划线（_）和破折号（-）。第一个非破折号字符不能是数字。同时，不能以两个破折号开头

/* Keyword values */
transition-property: none;
transition-property: all;
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;

/* css示例 */
.m-demo pre{transition:2s;width:100px;height:100px;padding:0;line-height:100px;border-radius:50%;font-size:20px;text-align:center;}
.m-demo:hover pre{left:500px;color:#000;}
.m-demo-1 pre{transition-property:none;}
.m-demo-2 pre{transition-property:all;}
.m-demo-3 pre{transition-property:left;}
.m-demo-4 pre{transition-property:left,color;padding:20px 0;line-height:30px;}
<div class="m-demo m-demo-1">
    <pre>none</pre> 
<div class="m-demo m-demo-2">
    <pre>all</pre> 
<div class="m-demo m-demo-3"> 
    <pre>left</pre>
<div class="m-demo m-demo-4"> 
    <pre>left,<br>color</pre>
</div>

transtion-duration:<time> [,<time>]*

time 表示过渡属性从旧的值转变到新的值所需要的时间。如果时长是 0s ，表示不会呈现过渡动画，属性会瞬间完成转变。不接受负值。
以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画
可以指定多个时长，每个时长会被应用到由 transition-property 指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变。

/* <time> 值 */
transition-duration: 6s;
transition-duration: 120ms;
transition-duration: 1s, 15s;
transition-duration: 10s, 30s, 230ms;

/* css示例 */
.m-demo:hover pre{left:500px;color:#000;}
.m-demo pre:nth-child(1){transition-duration:0s;top:0;}
.m-demo pre:nth-child(2){transition-duration:1s;top:150px;}
.m-demo pre:nth-child(3){transition-duration:2s;top:300px;}
.m-demo pre:nth-child(4){transition-duration:3s;top:450px;}
<div class="m-demo m-demo-1">
    <pre>0s</pre>
    <pre>1s</pre>
    <pre>2s</pre>
    <pre>3s</pre>
</div>

transition-timing-function

定义过渡变化函数

可以取得值
transition-timing-function: ease  //默认值,两头慢,中间快
transition-timing-function: ease-in //开始慢
transition-timing-function: ease-out //结束慢
transition-timing-function: ease-in-out //开始结束慢,中间快 幅度大一点
transition-timing-function: linear  //匀速
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1) //曲线,设置两个点x,y
transition-timing-function: step-start
transition-timing-function: step-end
transition-timing-function: steps(4, end)  //分为4步,每步结尾动画
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)
transition-timing-function: inherit

/* css DEMO */
.m-demo pre{transition:2s;width:100px;height:100px;padding:0;line-height:100px;border-radius:50%;text-align:center;font-size:20px;}
.m-demo:hover pre{left:500px;color:#000;}
.m-demo pre:nth-child(1){transition-timing-function:ease;top:0;}
.m-demo pre:nth-child(2){transition-timing-function:linear;top:150px;}
.m-demo pre:nth-child(3){transition-timing-function:ease-out;top:300px;}
.m-demo pre:nth-child(4){transition-timing-function:cubic-bezier(0.8,0,0,0.8);top:450px;padding:30px 0;line-height:20px;font-size:12px;}
.m-demo pre:nth-child(5){transition-timing-function:steps(3,start);top:600px;padding:30px 0;line-height:20px;font-size:16px;}
<div class="m-demo m-demo-1">
    <pre>ease</pre>
    <pre>linear</pre>
    <pre>ease-out</pre>
    <pre>cubic-bezier<br>(0.8,0,0,0.8)</pre>
    <pre>steps<br>(3,start)</pre>
</div>

transtion-delay:<time>#

time 表明动画效果属性生效之前需要等待的时间。延迟时间

/* <time>值 */
transition-delay: 3s;
transition-delay: 2s, 4ms;

/* css示例 */
.m-demo:hover pre{left:500px;color:#000;}
.m-demo pre:nth-child(1){transition-delay:0s;top:0;}
.m-demo pre:nth-child(2){transition-delay:1s;top:150px;}
.m-demo pre:nth-child(3){transition-delay:2s;top:300px;}
.m-demo pre:nth-child(4){transition-delay:3s;top:450px;}
<div class="m-demo m-demo-1">
    <pre>0s</pre>
    <pre>1s</pre>
    <pre>2s</pre>
    <pre>3s</pre>
</div>

transtion: property name | duration | timing function | delay 简写属性

初始值: all 0 ease 0
在 transition 属性中，各个值的书写顺序是很重要的：第一个可以解析为时间的值会被赋值给 transition-duration ，第二个可以解析为时间的值会被赋值给 transition-delay

/* Apply to 1 property */ /* property name | duration */
transition: margin-right 4s;
/* property name | duration | delay */
transition: margin-right 4s 1s;
/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;
/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;