css3动画效果

transform:2D变形: 通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。转换方法:translate()/rotate()/scale()/skew()/matrix()

none 定义不进行转换。 translate(x,y) 定义 2D 平移转换。 translateX(x) 定义转换,只是用 X 轴的值。 translateY(y) 定义转换,只是用 Y 轴的值。

scale(x,y) 定义 2D 缩放转换。 scaleX(x) 通过设置 X 轴的值来定义缩放转换。 scaleY(y) 通过设置 Y 轴的值来定义缩放转换。

rotate(angle) 定义 2D 旋转,在参数中规定角度。 补充1.角度也可以使用弧度单位:rad

skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 kewX(angle) 定义沿着 X 轴的 2D 倾斜转换。 skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。

matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。 变形矩阵功能很强大,但是相对比较复杂,涉及到复杂的数学计算,在本章中暂不作详细讲解。

transform-origin:改变元素变形的基准点 像素/百分比 X轴:left/right/center Y轴:top/bottom/center/

transform:3D变形: transform:3D变形可以近似理解为沿着Z轴移动元素,使得元素更加靠近或者远离你,从而使元素看起来变得更大或更小。

transform:3D变形函数 translate3d(x,y,z) 定义 3D 转换。 translateY(y) 定义转换,只是用 Y 轴的值。 translateX(x) 定义转换,只是用 X 轴的值。 translateZ(z) 定义 3D 转换,只是用 Z 轴的值。

rotate3d(x,y,z,angle) 定义 3D 旋转。 rotateX(angle) 定义沿着 X 轴的 3D 旋转。 rotateY(angle) 定义沿着 Y 轴的 3D 旋转。 rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

scale3d(x,y,z) 定义 3D 缩放转换。 scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。 scaleX(x) 通过设置 X 轴的值来定义缩放转换。 scaleY(y) 通过设置 Y 轴的值来定义缩放转换。

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。

transform-origin 允许你改变被转换元素的位置。2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。

perspective(n) 为 3D 转换元素定义透视视图。

transform-style 规定被嵌套元素如何在 3D 空间中显示。 flat 子元素将不保留其 3D 位置。 preserve-3d 子元素将保留其 3D 位置。

perspective-origin 规定 3D 元素的底部位置。目前浏览器都不支持 perspective-origin 属性, backface-visibility 定义元素在不面对屏幕时是否可见

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏老马寒门IT

04-老马jQuery教程-DOM节点操作及位置和大小

DOM时代我们通过document的createElement方法动态创建标签。创建标签后,动态的给他添加属性。例如代码:

2210
来自专栏九彩拼盘的叨叨叨

DOM 操作写法示例

852
来自专栏LIN_ZONE

已知两点的经度和纬度,计算两点间的距离(php,javascript)

php代码:转载  http://www.cnblogs.com/caichenghui/p/5977431.html

1081
来自专栏小白安全

JavaScript中style属性对照表

盒子标签和属性对照 CSS语法 (不区分大小写) JavaScript语法 (区分大小写) bo...

2835
来自专栏Unity Shader

Shader初学笔记:简单参数传入随机颜色

float4 vertex : POSITION;

48912
来自专栏Java帮帮-微信公众号-技术文章全总结

JavaWeb02-CSS,JS(Java真正的全栈开发)

? css&javascript 一.CSS 1.CSS介绍 CSS 指层叠样式表 (Cascading Style Sheets),用来定义网页的显示效果。...

45715
来自专栏听雨堂

EXCEL单元格的引用方式

EXCEL单元格的引用包括相对引用、绝对引用和混合引用三种。 相对引用   公式中的相对单元格引用(例如 A1)是基于包含公式和单元格引用的单元格的相对...

1937
来自专栏数据结构与算法

1004. 填充矩形 (Standard IO)

题目描述 已知矩形的大小为n×m,现用a×a的正方形填充该矩形。输入三个正整数n,m,a(n,m,a≤10^9),计算至多能填入多少正方形?(正方形可以正好碰到...

4816
来自专栏YoungGy

FSWD_3_JavaScriptAdvance

for for for…in for…of <!DOCTYPE html> <html lang="en"> <head> <meta ch...

2056
来自专栏天天

选择器与css的一些用法

811

扫码关注云+社区

领取腾讯云代金券