您的位置：首页 > Web前端 > HTML5

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

2019-04-06 09:23 295 查看

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

一、2D转换（tran 4000 sform）

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。 1cca8

什么是 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中还有一些新的东西，我们会在移动端里面进行补充

posted @ 2019-04-06 09:23 mufengsm 阅读(...) 评论(...) 编辑收藏

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航