CSS3动画与2D、3D转换
一、过度动画:transition
五个属性:
transition-property css 样式属性名称
transition-duration 动画持续时间(需要单位s)
transition-timing-function 动画效果函数名称
linear、ease、ease-in、ease-out、
ease-in-out、cubic-bezier(n,n,n,n)
transition-delay 延迟执行动画的时间
animation-play-state:paused;暂停动画执行
简写
transition:样式 持续时间 动画效果 延迟时间
transition:持续时间;(all时间 ease 0)
二、关键帧动画
七个属性
animation-name 帧动画名称
animation-duration 动画持续时间(需要单位s)
animation-timing-function 动画效果函数名称(linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n))
animation-delay 延迟执行动画的时间
animation-iteration-count 动画播放次数(n 次数;infinite 无限次)
animation-direction 是否轮流播放(normal 正常播放 alternate 来回轮流播放)
animation-fill-mode:none丨forwards丨backwards丨both丨initial丨inherit; 动画完成时的状态
样式:
@keyframes 帧动画名称{selector{styles}}
selector from to/%
简写:
animation:name time ease delay count direction fill-mode;
三、transform的2D变换
偏移(left top)
translate(x,y)translateX() translateY()
缩放(width height)
scale(x,y) scaleX() scaleY()
旋转
rotate(角度)
倾斜
skew(x角度,y角度) skewX(角度) skewY(角度)
四、transform的3D变换
每个属性都比2D多了一个Z轴需要设置transform-style:preserve-3d;才能看到3D视觉效果
偏移(left top 景深)
translate3d(x,y,z,angle) translateX() translateY() translateZ()
缩放( width height 景深)
scale3d(x,y,z) scaleX() scaleY() scaleZ()
旋转
rotate3d(x,y,z) rotateX() rotateY() rotateZ()
注:倾斜没有Z轴
transform-origin 改变被变换元素的转换参考位置
transform-origin:left top;(left top之间是空格)
五、3D透视(效果类似于相机拍照)
透视距离(perspective)
当给一个元素设置透视属性时,其子元素会获得透视效果,通过设置不同的值,可以改变观察子元素的距离
透视位置(perspective-origin)
需要先使用perspective,可以改变在观察子元素时,观察点的X,Y方向的位置
设置背面不可见(backface-visibility:hidden)
设置之后,当旋转180度查看元素背面时,将看不到正面透视内容(如果不设置,默认正面内容可以被透视)
CSS3动画与2D、3D转换的更多相关文章
- CSS自学笔记(13):CSS3 2D/3D转换
CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transfo ...
- CSS3带你实现3D转换效果
前言 在css3中允许使用3D转换来对元素进行格式化,在原本只是2D转化的平面中引入了Z轴.在这之前我们讲解了css3中的2D转换,也就是二维空间变换,本篇的3D转换就是基于原来的2D转换而来,与2D ...
- 使用 CSS3 动画实现的 3D 图片过渡特效
这是一个基于 CSS3 动画实现的图片过渡效果,共有 Flip.Rotation.Multi-flip.Cube.Unfold 等6种效果,它们将证明 CSS3 Transform 和 Transit ...
- 前端笔记之HTML5&CSS3(下)2D/3D转换&animate动画
一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...
- CSS3中2D/3D转换、过渡、动画
转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...
- css3学习总结8--CSS3 3D转换
3D 转换 1. rotateX() 2. rotateY() otateX() 方法 通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转. 示例: div { transform ...
- CSS3 transform变形(3D转换)
一.三维坐标 空间中三维坐标如下图所示: 向上为-Y,向下为+Y,向左为-X,向右为+X,向前为+Z,向后为-Z. 二.perspective(n)为 3D 转换元素定义透视视图 perspectiv ...
- CSS3 transform 属性(2D,3D旋转)
一.语法 div{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg) ...
- 七月十三号CSS3总结《2D的转换》
/*2D的转换*/ 位移 -webkit-transform: translate(10px, 10px) 缩放 -webkit-transform: scale(.5, .5)重置原点 ...
随机推荐
- Appium for win7 环境搭建
一.安装node.js 1.到官网下载node.js:https://nodejs.org/download/ 2.获取到安装文件后,直接双击安装文件,根据程序的提示,完成nodejs的安装. 3.安 ...
- c语言字符串操作大全
C语言字符串操作函数 函数名: strcpy 功 能: 拷贝一个字符串到另一个 用 法: char *stpcpy(char *destin, char *source); 程序例: #incl ...
- Eclipse下新建Maven项目、自动打依赖jar包
当我们无法从本地仓库找到需要的构件的时候,就会从远程仓库下载构件至本地仓库.一般地,对于每个人来说,书房只有一个,但外面的书店有很多,类似第,对于Maven来说,每个用户只有一个本地仓库,但可以配置访 ...
- 【java】之读取InputStream流
如这个文件 @Test public void test01() throws Exception{ InputStream in=new FileInputStream("c://test ...
- css3++js钟表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 理解JavaScript中的事件轮询
原文:http://www.ruanyifeng.com/blog/2014/10/event-loop.html 为什么JavaScript是单线程 JavaScript语言的一大特点就是单线程,也 ...
- 便捷的php操作mysql库MysqliDb
github 地址:https://github.com/joshcam/PHP-MySQLi-Database-Class MysqliDb -- Simple MySQLi wrapper and ...
- C Primer Plus(第五版)12
第 12 章 存储类, 链接和内存管理 在本章中你将学习下列内容 . 关键字: auto, extern, static, register, const, volatile, restricted. ...
- CoolTrayIcon4.0
CoolTrayIcon:在任务栏放置图标的控件,是同类空间中功能最为完善和强大的. 1.支持动态图标 2.交互式气球样式的提示框 3.支持bitmaps到icons的转换 4.支持设计状态预览 5. ...
- HTML音乐播放——切歌
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...