transform 属性应用于2D 或 3D 转换。该属性允许我们对元素进行平移、旋转、缩放或倾斜。
一.translate(x,y)、translateX(n)、translateY(n)定义2D平移转换
根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
若translate(x,y)只定义一个数值，默认y=0。
translateX(n):沿着 Y 轴移动元素。
translateY(n):沿着 Y 轴移动元素。
如下代码中：translate(50px,100px)表示从左向右移动50个像素，并从上向下移动100像素
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}
效果如下所示：
二.rotate(angle)定义2D旋转转换
定义 2D 旋转，在参数中规定角度。
angle为正值表示顺时针旋转，angle为负值表示逆时针旋转。
如下代码中，rotate(30deg)表示元素顺时针旋转30度。
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}
效果如下所示：
注：transform-origin 可以设置旋转基点位置，默认是中心点。
语法：transform-origin: x-axis y-axis
值
描述
x-axis
定义基点被置于 X 轴的何处。
可能的值：
left
center
right
length
%
y-axis
定义基点被置于 Y 轴的何处。
可能的值：
top
center
bottom
length
%
三、scale(x,y)、scaleX(n)、scaleY(n)定义2D缩放转换
scale(x,y)方法，元素增加或减少的大小，取决于宽度(X轴)和高度(Y轴)的参数。
若只写一个值，表示x=y。
scaleX(n)：改变元素的宽度，宽度为原来的n倍。
scaleY(n)：改变元素的高度，高度为原来的n倍。
如下代码中，scale(1.4,1.5)缩放宽度为原来的1.4倍，高度为原来的1.5倍。
div
{
transform: scale(1.4,1.5);
-ms-transform: scale(1.4,1.5); /* IE 9 */
-webkit-transform: scale(1.4,1.5); /* Safari and Chrome */
}
效果如下所示：
四.skew(x-angle,y-angle)、skewX(angle)、skewY(angle)定义2D倾斜转换
skew(x-angle,y-angle)方法中，x-angle表示x轴方向倾斜的角度，y-angle表示y轴方向倾斜的角度。
若只写一个值，表示第二个参数默认为0。
skewX( ):表示只在X轴(水平方向)倾斜。
skewY( ):表示只在Y轴(垂直方向)倾斜。
如下代码中，
div
{
transform:skew(10deg,20deg);
-ms-transform:skew(10deg,20deg); /* IE 9 */
-webkit-transform:skew(10deg,20deg); /* Safari and Chrome */
}
效果如下图所示：
五.matrix(n,n,n,n,n,n)定义2D转换，使用六个值的矩阵
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许：旋转、缩放、移动以及倾斜元素。
div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}
效果如下图所示：
CSS3 Transform变形(2D转换)
Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开始,结束.Animation:对元素某个属性 ...
CSS3 Transform变形理解与应用
CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开 ...
css3 字体、2D转换、3D转换
学习篇之CSS3 字体.2D转换.3D转换 一.字体 @font-face 将字体文件存放到 web 服务器上,通过CSS3 @font-face规则中定义,它会在需要时被自动下载到用户的计算机上. ...
css3 中的2D转换
一.CSS3转换 通过转换实现对对元素进行旋转.缩放.移动.拉伸的效果:这种原来必须要通过JS或者图片处理才可以实现的效果,现在都可以通过CSS3来完成. 2D转换采用transform属性来实现效果 ...
CSS3 transform 属性(2D,3D旋转)
一.语法 div{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg) ...
CSS3 transform变形(3D转换)
一.三维坐标 空间中三维坐标如下图所示: 向上为-Y,向下为+Y,向左为-X,向右为+X,向前为+Z,向后为-Z. 二.perspective(n)为 3D 转换元素定义透视视图 perspectiv ...
css3 transform 变形属性详解
本文主要介绍了css3 属性transform的相关内容,针对CSS3变形.CSS3转换.CSS3旋转.CSS3缩放.扭曲和矩阵做了详细的讲解.希望对你有所帮助. 这个很简单,就跟border-rad ...
css3 transform(变形)笔记
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 一.旋转 ...
CSS3中的2D转换
通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 转换是使元素改变形状.尺寸和位置的一种效果. 注:Internet Explorer 10.Firefox 以及 Opera 支 ...
随机推荐
Nginx location 匹配顺序整理
Nginx location模块整理 具体的Nginx安装就不在这里描述了,这里只是为了对location的描述 Nginx环境 a. 查看当前系统cat /etc/redhat-release [r ...
python字符串/元组/列表/字典互转
#-*-coding:utf-8-*- #1.字典 dict = {'name': 'Zara', 'age': 7, 'class': 'First'} #字典转为字符串,返回:
(转)eclipse 导入Android 项目 步骤
1.打开eclipse 2. 点击File--选择-->Import,会出来图片,如图 3.按上面的点击android下的Existing Android...出来画面,如下图 4.点击Br ...
tnsnames linux找的位置顺序
In Sue’s article, it states that SQLDeveloper looks for a tnsnames.ora in the following places in th ...
宏page_t
/** Type of the index page */ typedef byte page_t;
js+css实现模态层效果
在做web前端的时候,有些时候会涉及到模态层,在此提供一种实现思路.希望对大家实用.先贴效果吧: 模态层效果 以下说说在写模态层的时候的思路:通过可配置的參数width,height,title以及c ...
[国嵌攻略][098][Linux内核简介]
Linux系统架构 1.用户空间:应用程序.C函数库 2.内核空间:系统调用接口.内核.体系结构相关代码 Linux系统利用处理器不同的工作模式,使用其中的两个级别分别来运行Linux内核与应用程序, ...
DevExpress 只允许修改指定列
gridView1.OptionsBehavior.Editable = true; gridView1.OptionsBehavior.ReadOnly = false; foreach (Grid ...
js文字滚动效果
function (global) { var logo = document.getElementById('logo'); var text = document.createTextNode(' ...
ionicframework(二)
Start building with Ionic! Follow these quick steps and start building high quality mobile apps in m ...
2386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
