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 ...
随机推荐
- UVALive 3135--Argus+自己定义优先队列的优先规则
题目链接:id=18684">点击进入 仅仅是题意比較难懂,读懂题后全然能够用优先队列水过去.这次学会自己定义优先队列的优先规则,事实上就是在结构体中重载一下<运算符. 代码例如 ...
- SET XACT_ABORT ON 数据库事务
转载:http://www.cnblogs.com/rob0121/articles/2320932.html SET XACT_ABORT ON SET XACT_ABORT ON分为两种: 1.总 ...
- linux下如何挂接(mount)光盘镜像文件、移动硬盘、U盘、Windows网络共享和NFS网络共享
首先,介绍一下挂接(mount)命令的使用方法,mount命令参数非常多,这里主要讲一下今天我们要用到的. 命令格式: mount [-t vfstype] [-o options ...
- 使用Bootstrap 3开发响应式网站实践03,轮播下方的内容排版
通常把一些重要信息.需要重点标注的信息放在轮播的下方显示,这部分区域用到了大字体的标题.副标题以及段落文字等. <div class="row" id="bigCa ...
- [转载]typedef struct和struct的区别
typedef struct tagMyStruct { int iNum; long lLength; } MyStruct; 上面的tagMyStruct是标识符,MyStruct是变量类型(相 ...
- VirtualBox 安装虚拟机
- springboot2.X集成HttpClient 发送HTTPS 请求
1)jar <!--httpclient 发送外部https/http 请求--> <dependency> <groupId>org.apache.httpcom ...
- CVS环境搭建
1.下载cvsnt(可以从附件中下载) 2.安装cvsnt 直接双击运行cvsnt安装文件,安装过程中可以选择以经典.自定义和完全三种方式安装,在自定义方式中可以选择安装路径.安装完成后,在控 ...
- 《趣学Python编程》
<趣学Python编程> 基本信息 作者: (美)Jason Briggs 译者: 尹哲 出版社:人民邮电出版社 ISBN:9787115335951 上架时间:2014-2-21 出版日 ...
- Spring Boot中application.yml与bootstrap.yml的区别(转)
说明:其实yml和properties文件是一样的原理,主要是说明application和bootstrap的加载顺序.且一个项目上要么yml或者properties,二选一的存在. Bootstra ...