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转换)的更多相关文章

  1. CSS3 Transform变形(2D转换)

    Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开始,结束.Animation:对元素某个属性 ...

  2. CSS3 Transform变形理解与应用

    CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开 ...

  3. css3 字体、2D转换、3D转换

    学习篇之CSS3 字体.2D转换.3D转换 一.字体 @font-face 将字体文件存放到 web 服务器上,通过CSS3 @font-face规则中定义,它会在需要时被自动下载到用户的计算机上. ...

  4. css3 中的2D转换

    一.CSS3转换 通过转换实现对对元素进行旋转.缩放.移动.拉伸的效果:这种原来必须要通过JS或者图片处理才可以实现的效果,现在都可以通过CSS3来完成. 2D转换采用transform属性来实现效果 ...

  5. CSS3 transform 属性(2D,3D旋转)

    一.语法 div{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg) ...

  6. CSS3 transform变形(3D转换)

    一.三维坐标 空间中三维坐标如下图所示: 向上为-Y,向下为+Y,向左为-X,向右为+X,向前为+Z,向后为-Z. 二.perspective(n)为 3D 转换元素定义透视视图 perspectiv ...

  7. css3 transform 变形属性详解

    本文主要介绍了css3 属性transform的相关内容,针对CSS3变形.CSS3转换.CSS3旋转.CSS3缩放.扭曲和矩阵做了详细的讲解.希望对你有所帮助. 这个很简单,就跟border-rad ...

  8. css3 transform(变形)笔记

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 一.旋转 ...

  9. CSS3中的2D转换

    通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 转换是使元素改变形状.尺寸和位置的一种效果. 注:Internet Explorer 10.Firefox 以及 Opera 支 ...

随机推荐

  1. linux过滤旧文件中的空行和注释行剩余内容组成新文件

    一.说明 在某些场景下我们想要将旧文件中空行和注释行过滤掉,将产生实际效果的行保留. 比如redis提供的配置示例文件中有很多用于说明的空行和注释行,我们想把产生实际效果的配置行筛选出来组成新的简洁的 ...

  2. MySQL变量变更小记

    MySQL会随版本的更新,在新版本中淘汰一些variable和引入一些新的variable.在配置variable后不起作用或安全扫描取不到variable值产生告警时,可能正是variable变更的 ...

  3. jsp 内置对象(五)

    1.Request对象 该对象封装了用户提交的信息,通过调用该对象相应的方法可以获取封装的信息,即使用该对象可以 获取用户提交的信息. 当Request对象获取客户提交的汉字字符时,会出现乱码问题,必 ...

  4. shiro过滤器解释类

    anon -- org.apache.shiro.web.filter.authc.AnonymousFilter authc -- org.apache.shiro.web.filter.authc ...

  5. Linux gcc getcwd()的实现 zhuan

      通过getcwd()可以获取当前工作目录. 1 #include <unistd.h> 2 3 char *getcwd(char *cwdbuf, size_t size);

  6. pytesseract 验证码识别

    以下代码,如有不懂加群讨论# *-* coding:utf-8 *-* #import jsonimport requestsimport pytesseractimport timeimport d ...

  7. 【框架】Testng用例失败自动重跑(五)

    arrow是testng的一个扩展插件,参考arrow的源代码 1.新建一个工程,结果如图: 2.RetryListener.java的代码 package com.netease.qa.testng ...

  8. 关于js的对象原型继承(一)

    javascript中,对象的继承是通过原型去继承. 可以这样理解:js中的对象,包含的除了属性和方法,还有一个最基本的原型__proto__对象.这个原型__proto__指向谁,这个对象就继承谁. ...

  9. Linux系统管理常用命令用法总结(1)

    1.usermod可用来修改用户帐号的各项设定. usermod [-LU][-c <备注>][-d <登入目录>][-e <有效期限>][-f <缓冲天数& ...

  10. 牛客多校第五场 F take

    链接:https://www.nowcoder.com/acm/contest/143/F来源:牛客网 题目描述 Kanade has n boxes , the i-th box has p[i] ...