2D转换方法:

translate()
rotate()
scale()
skew()
matrix()

1、translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动

例如:

 div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

translate值(50px,100px)是从左边元素移动50个像素,并从顶部移动100像素。

2、rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。

例如:

 div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

rotate值(30deg)元素顺时针旋转30度。

3、scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数:

例如:

 -ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */

scale(2,3)转变宽度为原来的大小的2倍,和其原始大小3倍的高度。

4、skew() 方法

语法:

 transform:skew(<angle> [,<angle>]);

包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜

  • skewX(<angle>);表示只在X轴(水平方向)倾斜
  • skewY(<angle>);表示只在Y轴(垂直方向)倾斜

例如”:

 div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度

5、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 */
}

CC3中的2D转换的更多相关文章

  1. css3 中的2D转换

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

  2. CSS3中的2D转换

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

  3. CSS中2d转换:transition过渡放在:hover伪类中与应用在整个元素中区别

    css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...

  4. CSS3中的2D和3D转换知识介绍

    一  2D转换 转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.变形.缩放,甚至支持矩阵方式,配合即将学习的过渡和动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 1.移动 ...

  5. HTML CSS3中2D转换、3D转换、过渡效果总结

    一.CSS3 2D转换 通过 CSS3 转换,我们可以对元素进行移动.缩放.转动.拉长或拉伸. 特别注意,我们在使用css3动画效果时,必须给他们加相应的浏览器前缀,以便浏览器识别,让我们更好的去应用 ...

  6. CSS 3学习——transform 2D转换

    首先声明一点,transform属性不为none的元素是它的定位子元素(绝对定位和固定定位)的包含块,而且对内创建一个新的层叠上下文. 注意:可以通过 transform-box 属性指定元素的那个盒 ...

  7. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  8. css3之2D转换

    css3---2D转换 css3中出现了许多新的特性,其中2D转换我觉的非常有意思,通过她,我们能够对元素进行移动.缩放.转动.拉长或者拉伸,所以希望在这里和大家分享一下. 这里,我将会介绍到以下转换 ...

  9. CSS3 2D 转换

    2D 转换 在本章中,您将学到如下 2D 转换方法: translate() rotate() scale() skew() matrix() 您将在下一章学习 3D 转换. 实例 div { tra ...

随机推荐

  1. CFontDialog学习

    void CMfcFontDlgDlg::OnBtnFont() { // Show the font dialog with all the default settings. CFontDialo ...

  2. php数据库操作命令精华大全

    1.表结构//列信息2.表数据//行信息3.表索引//把列中的行加到索引中(一般情况下一个表一定要把id这一列的所有数据都加到主键索引中) 2.[dos下]关闭mysql:net stop mysql ...

  3. iOS开发之--制作属于自己的frameWork

    开发的时候,有时候,我们会遇到协同开发,在协同开发的时候,每个开发者都会创建自己的工具类,还有就是当一个项目需要嵌套到另一个项目里面,这些时候,如果能把所需的部分打包成framework,会方便很多, ...

  4. leetcode 326 Power of Three (python)

    原题: Given an integer, write a function to determine if it is a power of three. Follow up: Could you ...

  5. js获取上个月的第一天和最后一天

    var now = new Date(); var fd = new Date(now.getFullYear(), now.getMonth()-1 ,1).toLocaleDateString() ...

  6. freemarker的${!}

    ${sss!} <#--没有定义这个变量,默认值是空字符串! --> ...................................... 转自:https://blog.csdn ...

  7. python pip源配置,pip配置文件存放位置

    https://blog.csdn.net/u013066730/article/details/54580789/ pip源配置文件可以放置的位置: Linux/Unix: /etc/pip.con ...

  8. Cookie 入门

    位于 javax.servlet.http 包下 1. HTTP 协议与 Cookie 关于 Cookie Cookie 是 HTTP 协议制定的!先由服务器保存 Cookie 到浏览器, 在下次浏览 ...

  9. 转!! 关于jsp编码设置 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

    我们在写jsp页面的时候经常会在页面头部使用如下代码: <%@ page language="java" contentType="text/html; chars ...

  10. python return中的or和and语句

    python return中的or和and语句 1.二元运算: 如果一个True,一个False或两个false: return True and False # 返回False return Tru ...