饥人谷技术博客

CSS变形与动画

2018-02-02  本文已影响185人  YM雨蒙

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

变形

transform 语法

/* 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(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>
改变rotate的值,元素会随着数值旋转 
transform:translate(20px,50px)  //中间用逗号隔开
transform:translate(-40px,20%)
transform:translate(100px)  //只表示x轴偏移
transform:translateX(20%)
transform:translateY(20%)
变形之移动translate 
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)
变形之scale缩放拉伸 
transform:skew(30deg)  //y轴向x轴倾斜了30deg
transform:skew(30deg,30deg)  //y轴向x轴倾斜了30deg x轴也向y轴偏移30deg
transform:skewX(45deg)
transform:skewY(60deg)
变形之skew倾斜

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

transform:translate(50px) scale(1.5);
transform:translate(50px) skew(120deg);
变形多重组合使用 
/* 单值语法 */
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轴旋转呢?我们来学习新的属性

/* Keyword value */
perspective: none;

/* <length> values */
perspective: 20px;  
perspective: 3.5em;
透视效果 
/* 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(10px,20%,200px)
transform:translateX(10px)
transform:translateY(20%)
transform:translateZ(200px)
3d移动 
transform:scale3d(1.2,1.2,1); //x,y轴变大1.3倍,z不变
transform:scaleZ(5)  //并不会影响盒子的大小
3d缩放 
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
transform-style:preserve-3d
保留3d空间

背面不可见怎么办?

backface-visibility:hidden
背面不可见

过渡效果

/* 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>
<div class="m-demo m-demo-2">
    <pre>all</pre>
</div>
<div class="m-demo m-demo-3">
    <pre>left</pre>
</div>
<div class="m-demo m-demo-4">
    <pre>left,<br>color</pre>
</div>
指定属性过渡动画 
/* <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: 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>
不同的值不同的动画步骤 
/* <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>
一样的动画出发时间不同 
/* 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;

/* Apply to 2 properties */
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;
transtion简写过渡属性

动画

上一篇 下一篇

猜你喜欢

热点阅读