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


前端笔记之HTML5&CSS3(下)2D/3D转换&animate动画的更多相关文章

  1. 前端笔记之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡

    一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...

  2. CSS3中2D/3D转换、过渡、动画

    转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...

  3. 前端笔记之HTML5&CSS3(上)新特性&音频视频&本地存储&自定义属性

    一.HTML5简介 HTML 5 的第一份正式草案已于2008年1月22日公布.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 2014年10月29日,万维网联盟 ...

  4. CSS自学笔记(13):CSS3 2D/3D转换

    CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transfo ...

  5. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  6. 10个优秀的 HTML5 & CSS3 下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  7. HTML5/CSS3(PrefixFree.js) 3D文字特效

    之前在园子里看到一个HTML5/CSS3的文字特效(这里),觉得挺好玩的所以小小的研究了下,不过发现代码都是针对webkit以及FF的所以IE跪了. Runjs 我将示例中的代码进行了精简,后来发现C ...

  8. css3 2d转换3d转换以及动画的知识点汇总

    css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值 ...

  9. 11个优秀的HTML5 & CSS3下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用HTML5和CSS3可以更容易创造视觉 ...

随机推荐

  1. 微信小程序1

    本次项目主要了解及使用微信小程序,以及更好的理解微信动画,wxss,JavaScript,ajax,xml等技术: 借助的平台是java后端设计语言以及微信小程序界面,设计 该系统分为1,个人用户端: ...

  2. PHP中使用CURL之php curl详细解析

    在正式讲怎么用之前啊,先提一句,你得先在你的PHP环境中安装和启用curl模块,具体方式我就不讲了,不同系统不同安装方式,可以google查一下,或者查阅PHP官方的文档,还挺简单的. 1. 拿来先试 ...

  3. 微信测试号开发入门配置问题java

    这个测试号配置弄了好几天了,入了无数坑,终于解决了...辛苦我了,手动安慰一下自己.. 为了萌新们以后不要再浪费时间绕半天做无用功.看看楼楼的艰苦历程吧. 此教程针对没有云服务器,没有自己的域名的.没 ...

  4. Redis安装完整步骤

    安装: 1.获取redis资源 wget http://download.redis.io/releases/redis-4.0.8.tar.gz 2.解压 tar xzvf redis-4.0.8. ...

  5. 解决Visual Studio 加载符号卡死情况

    VS 加载符号 过慢或卡死的情况都可以用这种方法 打开VS的[工具]-[选项]-[调试]-[符号], 如下图所示: 1. 先取消勾选 ”Microsoft符号服务器” 2. 再点击 “清空符号缓存” ...

  6. Devexpress Ribbon 动态生成菜单

    /// <summary> /// 动态加载菜单 /// </summary> private void GetMenuBind() { //根据登录用户角色菜单动态创建 // ...

  7. C语言面试题分类->指针

    有关指针的经典面试题 C语言为何如此长寿并实用?C++为什么有那么多精彩?指针可以说是C/C++中的灵魂所在,虽然早期中pascal也有指针,但是和C/C++比起来不是一个级别的.今天为大家深入浅出的 ...

  8. Mesos源码分析(12): Mesos-Slave接收到RunTask消息

    在前文Mesos源码分析(8): Mesos-Slave的初始化中,Mesos-Slave接收到RunTaskMessage消息,会调用Slave::runTask.   void Slave::ru ...

  9. Java打包商用化软件

    这是我在博客中写的第一篇文章.还请各位大神们多多指教!我会详细讲解如何将我们由java的swing以及awt组件编写出的java可视化窗口程序编制成一个我们能够让用户使用的,商业化,可安装的软件.网上 ...

  10. 文末福利丨i春秋互联网安全校园行第1站精彩回顾

    活动背景 为响应国家完善网络安全人才培养体系.推动网络安全教育的号召,i春秋特此发起“互联网安全校园行”系列活动.旨在通过活动和知识普及提升大学生信息安全意识,并通过线下交流.技能分享.安全小活动以及 ...