CSS3动画效果之Transform
无意中翻看博客发现这个属性,就顺便熟悉了一下,百度了一下和查看了CSS3帮助文档,特整理一下
Transform 适应于对任一DOM元素的2D或3D转换,转换效果有:旋转、拉伸、平移、倾斜等。
目前浏览器并不是完全支持所有的Transform ,
IE9、 Firefox 和 Opera 仅支持2D transforms ,相应的CSS定义为: -ms-transform 、-moz-transform 和-o-transform , 而Safari 和Chrome 都支持2D和3D transforms ,相应的CSS定义为: -webkit-transform
该属性的值主要有如下:
Value |
Description |
none |
定义这不需要转换 |
matrix(n,n,n,n,n,n) |
使用有6个值的矩阵(matrix)来定义一个 2D 转换 |
matrix3d |
使用有4*4的矩阵(matrix)来定义一个 3D 转换 |
translate(x,y) |
定义一个2D 转换,x:水平位移,y:垂直位移,个人觉得和margin-left(left) 和margin-top(top)类似. |
translate3d(x,y,z) |
定义一个2D 转换,x:水平位移,y:垂直位移,z:Z方向的位移 |
translateX(x) |
定义一个水平方向2D 转换 |
translateY(y) |
定义一个垂直方向2D 转换 |
translateZ(z) |
定义一个Z方向3D 转换 |
scale(x,y) |
定义一个2D 拉伸, x:水平拉伸,y:垂直拉伸 |
scale3d(x,y,z) |
义一个3D 拉伸, x:水平拉伸,y:垂直拉伸,z:Z方向的拉伸 |
scaleX(x) |
定义一个水平方向拉伸 |
scaleY(y) |
定义一个垂直方向拉伸 |
scaleZ(z) |
定义一个Z方向的拉伸 |
rotate(angle) |
定义一个 2D 旋转, angle :旋转角度(deg) |
rotate3d(x,y,z,angle) |
定义一个 3D 旋转, |
rotateX(angle) |
定义一个X轴3D旋转 |
rotateY(angle) |
定义一个Y轴3D旋转 |
rotateZ(angle) |
定义一个Z轴3D旋转 |
skew(x-angle,y-angle) |
定义一个X轴和Y轴的2D 倾斜 |
skewX(angle) |
定义一个X轴的2D 倾斜 |
skewY(angle) |
定义一个Y轴的2D 倾斜 |
perspective(n) |
定义一个3D转换效果和透视图 |
transform-origin配合transform,目的是定义元素旋转的位置
语法:transform-origin: x-axis y-axis z-axis;
说明:
Property Value |
Description |
x-axis |
定义X轴的转换位置. 可能的值有:
|
y-axis |
定义Y轴的转换位置. 可能的值有:
|
z-axis |
定义Z轴的转换位置. 可能的值有:
|
默认值:50% 50%,效果等同于center center
可取值的定义:
- <percentage>:
- 用百分比指定坐标值。可以为负值。可以是纯数字或者数字加百分比
- <length>:
- 用长度值指定坐标值。可以为负值。必须是数字加单位(如px)
- left:
- 指定原点的横坐标为left
- center①:
- 指定原点的横坐标为center
- right:
- 指定原点的横坐标为right
- top:
- 指定原点的纵坐标为top
- center②:
- 指定原点的纵坐标为center
- bottom:
- 指定原点的纵坐标为bottom
CSS3动画效果之Transform的更多相关文章
- 鼠标悬停css3动画效果
下载Demo 效果预览 html: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- Css3动画效果,彩色文字效果,超简单的loveHeart
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...
- Bounce.js – 快速创建漂亮的 CSS3 动画效果
Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...
- CSS3 动画效果带来的bug
css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...
- animate.css 一些常用的CSS3动画效果
大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...
- CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码
CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...
- 第八十三节,CSS3动画效果
CSS3动画效果 学习要点: 1.动画简介 2.属性详解 3.简写和版本 本章主要探讨HTML5中CSS3的动画效果,可以通过类 Flash那样的关键帧模式控制运行. 一.动画简介 CSS3提 ...
- CSS3动画效果——js调用css动画属性并回调处理详解
http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...
- 35个让人惊讶的CSS3动画效果
1. Pure CSS Coke Can 2. Colorful Clock 3. jQuery DJ Hero 4. Animated Pricing Column 5. Slick jQuery ...
随机推荐
- C#遍历系统所安装的打印机,使用WMI方式获取打印机的所有属性
有网友发消息来询问,C#如何遍历系统已经安装的所有打印机,并获得每个打印机的相关信息,如:端口,名称等等 C#里面,虽然在 System.Drawing.Printing 这个namespace下,提 ...
- 报错:对一个或多个实体的验证失败。有关详细信息,请参阅“EntityValidationErrors”属性
当使用Entity Framework,并且把领域模型的某个字段设置成不能为null,但在保存.更新的时候,如果领域模型的该字段为null了,就会报如上错误. 解决方法:给领域模型不能为null的字段 ...
- 点集转线python最优代码
import arcpy import os import types def convertPoints(): arcpy.env.overwriteOutput = True inPts = ar ...
- LDAP 总结
LDAP入门 首先要先理解什么是LDAP,当时我看了很多解释,也是云里雾里,弄不清楚.在这里给大家稍微捋一捋. 首先LDAP是一种通讯协议,LDAP支持TCP/IP.协议就是标准,并且是抽象的.在这套 ...
- pandas过滤包含特定字符串的行
~df.col3.str.contains('u|z')也就是在条件前面加~号,表示not
- OpenCV特征检测教程
http://docs.opencv.org/2.4/doc/tutorials/features2d/table_of_content_features2d/table_of_content_fea ...
- 3D屏保:N皇后
前几天园子里有人发表关于8皇后的算法.只有代码,没有能运行的DEMO多枯燥.于是我这两天抽时间写了个N皇后的屏保程序.程序启动后会从4皇后到14皇后显示其所有排列,每隔0.5秒自动切换一次.按下空格键 ...
- go语言基础之不要操作没有合法指向的内存
1.不要操作没有合法指向的内存 示例: package main //必须有个main包 import "fmt" func main() { //没有指向内存 var p *in ...
- OkHttp 官方Wiki【设计思想】
官方Wiki之Calls 原文位置:https://github.com/square/okhttp/wiki/Calls The HTTP client's job is to accept you ...
- Windows服务器PHPstudy配置安装微擎教程
此教程只适于无环境的新服务器,有环境请勿安装用电脑上面的远程桌面连接登陆服务器.1,下载微擎安装包,下载PHPstudy,下载V9运行库.安装PHPstudy.安装V9运行库.准备好3个. <i ...