前端笔记之HTML5&CSS3（下）2D/3D转换&animate动画

一、2D转换（transform）

CSS3中的transform转换和PS中的变换是一样的，分别有：缩放、位移、斜切、旋转

 

1.1 transform:scale()缩放

 transform:scale(w,h);   宽度和高度，w,h都是填写缩放的倍数，没有单位，比如1.5就是放大1.5倍，1是默认的倍数，0.5缩小，还可以为负数（倒着缩放）

 

语法：

 transform:scale(1.5,2.0);

上面这句话等价于：

 transform:scaleX(1.5);   宽度

 transform:scaleY(2.0);   高度

 

---

 

1.2 transform:translate()位移

 transform:translate(x,y);      X和Y的单位可以是px或%

 

 transform:translate(100px,200px);

上面这句话等价于：

 transform:translateX()

 transform:translateY()

 

说明：

 X移动的X轴

 Y移动的Y轴

 

注意：移动的位置是相对于自己原来的位置进行移动，如果Y轴不写，默认是0。

 transform:translate(50%,50%);   移动自己盒子宽高的一半

 transform:translate(150px,100px); 从当前位置X轴向右移动150px，Y轴向下移动100px

 transform:translate(-150px,-100px); 从当前位置X轴向左移动150px，Y轴向上移动100px

 

---

1.3 transform:skew()斜切

 transform:skew(x,y);    X和Y轴的单位是deg，值可以为负数

 

 transform:skew(30deg,20deg);

等价于：

 transform:skewX(30deg);

 transform:skewY(20deg)

 

说明：

 X相对于X轴的斜切角度

 Y相对于Y轴的斜切角度

如果只写X轴，Y轴省略不写，则Y默认是0。

 

---

1.4 transform:rotate()旋转

 transform:rotate(360deg);

 

上面这句话等价于：

 transform:rotateZ();

 

描述：旋转角度用deg单位表示，具体多少度，可以任意填写。

 transform:rotate(90deg);     按顺时针旋转90度

 transform:rotate(-90deg);    按逆时针旋转90度

 

---

1.5组合使用

注意：如果有多个转换效果，每个转换效果用空格隔开。

 

---

二、设置转换中心点

设置元素转换的时候有中心点，围绕着中心点来变换，默认围绕z轴中间转换。

 transform-origin:x y;

如果只写X轴，Y轴默认是center。

 X和Y轴的参数，可以是px、%单位，还可以是left、top、right、bottom、center

 

---

三、3D转换（transform）

3D其实就是X、Y、Z三个轴进入到3D空间展示，不在水平面上。

 

3.1 transform:rotateX()

 

 transform:rotateX(); 围绕着X轴进行旋转

 

 transform:rotateX(360deg);

 

---

3.2 transform:rotateY()

 

 transform:rotateY(360deg); 围绕着X轴进行旋转

 

---

3.3 transform:translateZ()

 transform:translateZ();

沿着Z轴进行移动，往自己朝向的前后方向移动，近大远小。

---

 

3.4 transform-style

 transform-style:preserve-3d;规定子元素如何在3D空间中显示(将所有子元素都进入3D空间中呈现)

 

注意：要做3D效果必须加这个属性，而且要给父级加，加上后子元素才能有3D效果。

 

---

3.5透视

 

近大远小（值越大就越近，值越小就越远）

 

语法：

 perspective:length;    设置透视的值，单位px，范围：1px~无穷大

 

 perspective-origin:x y; 设置透视的消失点，x y的值可以是px、%或left、right、top、bottom。

默认不写就是center。

注意：透视要给父级元素加，子元素加3D变换效果。

 

---

3.6背面隐藏

 backface-visibility: hidden;   属性定义当前元素不面向屏幕时是否可见

如果在翻转元素不希望看到其背面， 该属性就可以隐藏。

 

---

四、CSS3 animation动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

什么是 CSS3 中的动画？

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

 

CSS3动画分为两部分组成：定义、调用

第一步：【定义动画】

 @keyframes 动画名称{

    from{}

    to{}

 }

 

 @keyframes 动画名称{

    0%{}

    100%{}

 }

第二步：【调用动画】

 animation:动画名称 花费时间 运动曲线 何时开始 播放次数 轮流逆向播放 保持最终状态

 

 infinite    无限循环播放，播放次数可以是纯数字，或者无限循环

 alternate   轮流逆向播放

 forwards    保持最终状态（停留在最后一种状态，不能和infinite共存）

 

 animation:move 2s linear 1s 3 infinite alternate forwards;

 

前面两项必须写，后面的参数是可选的。

 

  animation-play-state:paused;  动画暂停属性 

 注意：如果项目中需要兼容所有低版本浏览器，请加上浏览器前缀。

 

HTML5和CSS3中还有一些新的东西，我们会在移动端里面进行补充

---