前端笔记之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中还有一些新的东西,我们会在移动端里面进行补充
前端笔记之HTML5&CSS3(下)2D/3D转换&animate动画的更多相关文章
- 前端笔记之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡
一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...
- CSS3中2D/3D转换、过渡、动画
转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...
- 前端笔记之HTML5&CSS3(上)新特性&音频视频&本地存储&自定义属性
一.HTML5简介 HTML 5 的第一份正式草案已于2008年1月22日公布.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 2014年10月29日,万维网联盟 ...
- CSS自学笔记(13):CSS3 2D/3D转换
CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transfo ...
- 24个 HTML5 & CSS3 下拉菜单效果及制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- 10个优秀的 HTML5 & CSS3 下拉菜单制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- HTML5/CSS3(PrefixFree.js) 3D文字特效
之前在园子里看到一个HTML5/CSS3的文字特效(这里),觉得挺好玩的所以小小的研究了下,不过发现代码都是针对webkit以及FF的所以IE跪了. Runjs 我将示例中的代码进行了精简,后来发现C ...
- css3 2d转换3d转换以及动画的知识点汇总
css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值 ...
- 11个优秀的HTML5 & CSS3下拉菜单制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用HTML5和CSS3可以更容易创造视觉 ...
随机推荐
- 微信小程序1
本次项目主要了解及使用微信小程序,以及更好的理解微信动画,wxss,JavaScript,ajax,xml等技术: 借助的平台是java后端设计语言以及微信小程序界面,设计 该系统分为1,个人用户端: ...
- PHP中使用CURL之php curl详细解析
在正式讲怎么用之前啊,先提一句,你得先在你的PHP环境中安装和启用curl模块,具体方式我就不讲了,不同系统不同安装方式,可以google查一下,或者查阅PHP官方的文档,还挺简单的. 1. 拿来先试 ...
- 微信测试号开发入门配置问题java
这个测试号配置弄了好几天了,入了无数坑,终于解决了...辛苦我了,手动安慰一下自己.. 为了萌新们以后不要再浪费时间绕半天做无用功.看看楼楼的艰苦历程吧. 此教程针对没有云服务器,没有自己的域名的.没 ...
- Redis安装完整步骤
安装: 1.获取redis资源 wget http://download.redis.io/releases/redis-4.0.8.tar.gz 2.解压 tar xzvf redis-4.0.8. ...
- 解决Visual Studio 加载符号卡死情况
VS 加载符号 过慢或卡死的情况都可以用这种方法 打开VS的[工具]-[选项]-[调试]-[符号], 如下图所示: 1. 先取消勾选 ”Microsoft符号服务器” 2. 再点击 “清空符号缓存” ...
- Devexpress Ribbon 动态生成菜单
/// <summary> /// 动态加载菜单 /// </summary> private void GetMenuBind() { //根据登录用户角色菜单动态创建 // ...
- C语言面试题分类->指针
有关指针的经典面试题 C语言为何如此长寿并实用?C++为什么有那么多精彩?指针可以说是C/C++中的灵魂所在,虽然早期中pascal也有指针,但是和C/C++比起来不是一个级别的.今天为大家深入浅出的 ...
- Mesos源码分析(12): Mesos-Slave接收到RunTask消息
在前文Mesos源码分析(8): Mesos-Slave的初始化中,Mesos-Slave接收到RunTaskMessage消息,会调用Slave::runTask. void Slave::ru ...
- Java打包商用化软件
这是我在博客中写的第一篇文章.还请各位大神们多多指教!我会详细讲解如何将我们由java的swing以及awt组件编写出的java可视化窗口程序编制成一个我们能够让用户使用的,商业化,可安装的软件.网上 ...
- 文末福利丨i春秋互联网安全校园行第1站精彩回顾
活动背景 为响应国家完善网络安全人才培养体系.推动网络安全教育的号召,i春秋特此发起“互联网安全校园行”系列活动.旨在通过活动和知识普及提升大学生信息安全意识,并通过线下交流.技能分享.安全小活动以及 ...