CSS3属性transform详解之(旋转rotate,缩放scale,倾斜skew,移动translate) 0101后花园

CSS3属性transform详解之（旋转：rotate,缩放：scale,倾斜：skew。

在CSS3中，可以利⽤transform功能来实现⽂字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，本⽂将对此做详细介绍。

⼀.旋转 rotate⽤法：transform: rotate(45deg);共⼀个参数“⾓度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作⽤是顺时针旋转45度。

⼆.缩放 scale⽤法：transform: scale(0.5) 或者 transform: scale(0.5, 2);参数表⽰缩放倍数；⼀个参数时：表⽰⽔平和垂直同时缩放该倍率两个参数时：第⼀个参数指定⽔平⽅向的缩放倍率，第⼆个参数指定垂直⽅向的缩放倍率。

transform:scale(2,1.5):transform:scaleX(2):transform:scaleY(1.5):三.倾斜 skew⽤法：transform: skew(30deg) 或者 transform: skew(30deg, 30deg);参数表⽰倾斜⾓度，单位deg⼀个参数时：表⽰⽔平⽅向的倾斜⾓度；两个参数时：第⼀个参数表⽰⽔平⽅向的倾斜⾓度，第⼆个参数表⽰垂直⽅向的倾斜⾓度。

关于skew倾斜⾓度的计算⽅式表⾯上看并不是那么直观，这⾥借鉴某⼤拿绘制的图举例说明⼀下：⾸先需要说明的是skew的默认原点transform-origin是这个物件的中⼼点skewX(30deg) 如下图：skewY(10deg) 如下图：skew(30deg, 10deg) 如下图：我当初就是看到此图瞬间理解的。

四.移动 translate⽤法：transform: translate(45px) 或者 transform: skew(45px, 150px);参数表⽰移动距离，单位px，⼀个参数时：表⽰⽔平⽅向的移动距离；两个参数时：第⼀个参数表⽰⽔平⽅向的移动距离，第⼆个参数表⽰垂直⽅向的移动距离。

HTML5+CSS3 transform变形处理
在CSS 3中，可以使用transform功能实现旋转、缩放、倾斜和移动四种文字或图像的变形处理。

1．缩放
图像或文字的缩放处理可以使用scale方法来实现，参数中指定缩放倍率。

例如，scale(0.6)表示缩放60%。

2．旋转
图像或文字的旋转处理可以使用ratate方法来实现，参数中指定角度值。

例如，ratate（60deg）表示顺时针旋转60度，deg表示角度单位。

3．移动
图像或文字的移动处理可以使用translate方法来实现，参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。

例如，translate（40px，40px）表示水平方向上移动40像素，垂直方向上移动40像素。

4．倾斜
图像或文字的倾斜处理可以使用skew方法来实现，参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。

例如，skew（40deg，40deg）表示水平方向上倾斜40度，垂直方向上倾斜40度。

示例：17-10 skew.html
斜20度。

5．指定变形的基准点
在使用transform 方法对图像或文字进行变形时，是以标签的中心点为基准点进行的。

如果需要改变基准点，可以使用transform-origin 属性进行修改。

示例：17-11
.html 水平向上倾斜20度，
垂直向上倾斜20度。

修改为左下角。

改变基准为左下
角并旋转60度。

CSS3新增属性⼀、transform变换效果 CSS3 提供了元素变形效果，也叫做变换。

它可以将元素实现旋转、缩放和平移的功能。

属性有两个：transform 和 transform-origin对于 transform 的属性值，具体如下表：属性值说明none⽆变换translate(长度值或百分数值) translateX(长度值或百分数值) translatY(长度值或百分数值)在⽔平⽅向、垂直⽅向或两个⽅向上平移元素。

scale(数值) scaleX(数值) scaleY(数值)在⽔平⽅向、垂直⽅向或两个⽅向上缩放元素rotate(⾓度)旋转元素skew(⾓度) skewX(⾓度) skewY(⾓度)在⽔平⽅向、垂直⽅向或两个⽅向上使元素倾斜⼀定的⾓度matrix(4~6 数值，逗号隔开)指定⾃定义变换//向⽔平和垂直各移动 200 像素，也可以使⽤百分⽐transform: translate(200px,200px);//向⽔平平移 200 像素，不加后⾯的 0 也可以transform: translate(200px,0);transform: translateX(200px);//向垂直平移 200 像素transform: translate(0,200px);transform: translateY(200px);//⽔平、垂直⽅向放⼤ 1.5 倍transform: scale(1.5);transform: scale(1.5,1.5);//⽔平、垂直⽅向缩⼩ 0.8 倍transform: scale(0.8,0.8);//⽔平⽅向放⼤ 1.5 倍transform: scaleX(1.5);//垂直⽅向放⼤ 1.5 倍transform: scaleY(1.5);//旋转元素，0 ~ 360 度之间，负值均可transform: rotate(-45deg);//倾斜元素，0 ~ 360 度之间，负值均可transform: skew(45deg, 20deg);//⽔平倾斜元素，0 ~ 360 度之间，负值均可transform: skewX(45deg);//垂直倾斜元素，0 ~ 360 度之间，负值均可transform: skewY(45deg);//通过六个数值指定矩形，其内部公式计算较为复杂，请百度吧transform: matrix(1,0,0,1,30,30);//不同的值可以累计，通过空格分割transform: rotate(-45deg) scale(1.5);⼆．transform-origintransform-origin 属性可以设置变换的起点。

CSS中的transform属性及其应用CSS（层叠样式表）的transform属性是一项强大的功能，它可以用来实现各种元素的转换效果。

本文将介绍transform属性的基本概念和常见的应用方式。

一、transform属性的基本概念transform属性可以对元素进行旋转、缩放、平移和倾斜等变换操作。

它是CSS3新增的属性，允许开发者通过一些简单的代码实现元素的复杂变换效果，而无需使用JavaScript来操作。

1.1 语法transform属性的语法如下：transform: none | transform-function;1.2 常用变换方法常用的transform函数包括：- rotate(angle)：将元素按照指定角度进行旋转。

- scale(x,y)：将元素按照指定比例进行缩放，x和y分别表示水平和垂直方向上的缩放倍数。

- translate(x,y)：将元素在水平和垂直方向上进行平移，x和y分别表示水平和垂直方向的位移距离。

- skew(x-angle,y-angle)：将元素按照指定的角度进行倾斜，x-angle 和y-angle分别表示水平和垂直方向上的倾斜角度。

二、transform属性的应用2.1 旋转效果使用transform属性的rotate函数可以实现元素的旋转效果。

例如，下面的代码将一个div元素顺时针旋转45度：```cssdiv {transform: rotate(45deg);}```经过该变换后，div元素将以其中心点为旋转中心，顺时针旋转45度。

2.2 缩放效果使用transform属性的scale函数可以实现元素的缩放效果。

例如，下面的代码将一个图片元素按照2倍的比例进行水平和垂直方向上的缩放：```cssimg {transform: scale(2, 2);}```通过该变换，原本大小为100px × 100px的图片将会变为200px ×200px。

2.scale()函数：transform: scale(2);-o-transform: scale(2);-moz-transform: scale(2);-webkit-transform: scale(2);
当为 scale 传递不同的参数值时，缩放动画效果是不同的。scale(1,2) 意思是宽度保持不变，高度变为本来的 2 倍。scale(1,-2)意思是宽度
例如(兼容扫瞄器)：
1.rotate()函数：transform: rotate(-90deg);-o-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);filter:progid:DXImageTransform.Microsoft.Basi cImage(rotation=3);
第1页共2页
保e()函数：transform: translate(4px, 6px);-o-transform: translate(4px, 6px);-moz-transform:translate(4px, 6px);-webkit-transform: translate(4px, 6px);参数可以是负的像素 值。
matrix(3,2,3,5,0,0);-webkit-transform: matrix(3,2,3,5,0,0); 参数为 6 个数值。
4.skew()函数：transform: skew(30deg, -20deg);-o-transform: skew(30deg, -20deg);-moz-transform: skew(30deg, -20deg);-webkit-transform: skew(30deg, -20deg);会转变元素的外 形，而 rotate 函数不会转变元素的外形。

CSS3中的变形处理（transform）属性在CSS3中，可以利⽤transform功能来实现⽂字或图像的旋转、扭曲、缩放、位移、矩阵、原点这六种类型的变形处理，下⾯将详细讲解transform的使⽤。

变形--旋转 rotate()div.box{transform: rotate(45deg);} /*顺时针旋转45度*/变形--扭曲 skew()div.box{transform:skew(45deg);} /*通过skew（）函数将长⽅形变成平⾏四边形。

Skew()具有三种情况：1、skew(x,y)使元素在⽔平和垂直⽅向同时扭曲（X轴和Y轴同时按⼀定的⾓度值进⾏扭曲变形）；2、skewX(x)仅使元素在⽔平⽅向扭曲变形（X轴扭曲变形）；3、skewY(y)仅使元素在垂直⽅向扭曲变形（Y轴扭曲变形）*/变形--缩放 scale()div.box{transform: scale(1.5,0.5);} /*缩放 scale 具有三种情况：1、 scale(X,Y)使元素⽔平⽅向和垂直⽅向同时缩放（也就是X轴和Y轴同时缩放）2、scaleX(x)元素仅⽔平⽅向缩放（X轴缩放）3、scaleY(y)元素仅垂直⽅向缩放（Y轴缩放）scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作⽤使⼀个元素缩⼩；⽽任何⼤于或等于1.01的值，作⽤是让元素放⼤。

*/变形--位移 translate()div.box{transform: translate(50px,100px);} /* 通过translate()函数将元素向Y轴下⽅移动50px,X轴右⽅移动100px。

translate我们分为三种情况：1、translate(x,y)⽔平⽅向和垂直⽅向同时移动（也就是X轴和Y轴同时移动）2、translateX(x)仅⽔平⽅向移动（X轴移动）3、translateY(Y)仅垂直⽅向移动（Y轴移动）*/变形--矩阵 matrix ()div.box{transform: matrix(1,0,0,1,100,100);} /*matrix() 6个属性的意思的：第⼀个宽度⽐例1就是原⼤⼩，第⼆个是上下倾斜1就是2倍，2就是3倍，0就是不倾斜第三个是左右倾斜，数字和第⼆个⼀样的意思，第四个是⾼度⽐例1就是原⼤⼩，第五个是X⽅向的像素位移，X⽅向就是左右，第六个是Y⽅向的像素位移，X⽅向就是上下*/变形--原点 transform-origindiv.box{transform-origin: left top;transform: rotate(45deg); } /*改变元素原点到左上⾓，然后进⾏顺时旋转45度。

【CSS3transform属性和过渡属性详解】CSS3transform属性详解transform字⾯上就是变形，改变的意思。

在CSS3中transform主要包括以下⼏种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

2D Transform ⽅法1. translate() 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

2. rotate() 在⼀个给定度数顺时针旋转的元素。

负值是允许的，这样是元素逆时针旋转。

3. scale() 该元素增加或减少的⼤⼩，取决于宽度（X轴）和⾼度（Y轴）的参数。

4. matrix() 和2D变换⽅法合并成⼀个。

matrix ⽅法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

5. skew()包含两个参数值，分别表⽰X轴和Y轴倾斜的⾓度，如果第⼆个参数为空，则默认为0，参数为负表⽰向相反⽅向倾斜。

skewX(<angle>);表⽰只在X轴(⽔平⽅向)倾斜。

skewY(<angle>);表⽰只在Y轴(垂直⽅向)倾斜。

下⾯我们⼀个个来介绍它们：⼀、移动translate1、translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。

如：translate : translate(100px,20px);2、translateX(n) 定义 2D 转换，沿着 X 轴移动元素。

如：transform:translateX(100px);3、translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。

如：transform:translateY(20px);⼆、旋转rotaterotate(angle) 定义 2D 旋转，在参数中规定⾓度。

如：transform:rotate(30deg);三、缩放scale注意：默认值是1，它的值放⼤是⽐1⼤，缩⼩⽐1⼩。

css3transform属性详解CSS3变形是⼀些效果的集合，⽐如平移translate() 、旋转rotate()、缩放scare()和倾斜skew()效果，每个效果都被称作为变形函数（Transform Function）,它们可以操控元素发⽣旋转、缩放、和平移等变化。

CSS3的2D transform函数包括了translate()、scale()、rotate()和skew()。

translate()函数接受CSS的标准度量单位；scale()函数接受⼀个0和1之间的⼗进制值；rotate()和skew()两个函数都接受⼀个径向的度量单位值deg。

除了rotate()函数之外，每个函数都接受X轴和Y轴的参数。

CSS3变形中具有X /Y可⽤的函数：translateX()、translateY()、scaleX()、scaleY()、skewX()和skewY()。

（translateX(正的向右)，translateY（负的向上））2D transform常⽤的transform-function的功能:translate()：⽤来移动元素，可以根据X轴和Ｙ轴坐标重新定位元素位置。

在此基础上有两个扩展函数：translateX()和translateY()。

scale()：⽤来缩⼩或放⼤元素，可以使⽤元素尺⼨发⽣变化。

在此基础上有两个扩展函数：scaleX()和scaleY()。

rotate()：⽤来旋转元素。

skew()：⽤来让元素倾斜。

在此基础上有两个扩展函数：skewX()和skewY()。

matrix()：定义矩阵变形，基于X轴和Y轴坐标重新定位元素位置。

3D transform常⽤的transform-function的功能:translate3d()：移元素元素，⽤来指定⼀个3D变形移动位移量translate()：指定3Ｄ位移在Ｚ轴的位移量。

scale3d()：⽤来缩放⼀个元素。

css3中变形与动画（⼀）css3制作动画的⼏个属性：变形(transform)，过渡(transition)和动画(animation)。

⾸先介绍transform变形。

transform英⽂意思：改变，变形。

css3中transform主要包括以下⼏种：旋转(rotate),扭曲(skew)，缩放（scale)、移动(translate)和矩阵变形matrix。

语法：transform ： none | <transform-function> [ <transform-function> ]*transform: rotate | scale | skew | translate |matrix;none就是默认值，不进⾏变形。

<transform-function>:表⽰⼀个或多个变换函数，以空格分开。

即可同时对⼀个元素进⾏transform的多种属性操作，例如同时⽤rotate,scale 和translate三种。

rotate(<rotate-angle> [<cx> <cy>])skewX(<skew-angle>)skewY(<skew-angle>)scale(<sx> [<sy>])translate(<tx> [<ty>])matrix(<a> <b> <c> <d> <e> <f>)⼀、旋转rotaterotate(<angle>) :通过指定的⾓度参数对元素指定⼀个2D rotation(2D旋转)，需先有transform-origin属性的定义。

transform-origin定义的是旋转的基点，其中angle是指选择⾓度，正顺时针旋转，负逆时针旋转。

transform在css中的用法一、概述transform是CSS3中的一个属性，用于控制元素的变形效果，包括旋转、缩放、平移、倾斜等。

二、语法transform属性的语法如下：```transform: none | transform-functions;```其中，none表示不进行变形，transform-functions是一系列变形函数的组合。

三、变形函数1. 旋转函数旋转函数rotate用于将元素沿着中心点旋转指定角度。

语法如下：```transform: rotate(angle);```其中，angle表示旋转的角度，可以是正数或负数。

例如：```transform: rotate(45deg);```表示将元素顺时针旋转45度。

2. 缩放函数缩放函数scale用于改变元素的尺寸大小。

语法如下：```transform: scale(x, y);```其中，x和y分别表示水平和垂直方向上的缩放比例。

如果只设置一个值，则另一个值默认为与之相同。

例如：```transform: scale(2, 1.5);```表示将元素在水平方向上放大两倍，在垂直方向上放大1.5倍。

3. 平移函数平移函数translate用于改变元素在页面中的位置。

语法如下：```transform: translate(x, y);```其中，x和y分别表示水平和垂直方向上的偏移量。

例如：```transform: translate(50px, 100px);```表示将元素向右平移50像素，向下平移100像素。

4. 倾斜函数倾斜函数skew用于改变元素的形状。

语法如下：```transform: skew(x-angle, y-angle);```其中，x-angle和y-angle分别表示水平和垂直方向上的倾斜角度。

例如：```transform: skew(30deg, -10deg);```表示将元素在水平方向上逆时针倾斜30度，在垂直方向上顺时针倾斜10度。

css的transform用法CSS的transform属性可以改变元素的形状、大小和位置。

它可以简单地改变一个元素的某个属性，也可以通过组合多个变换来影响一个元素的外观。

本文将介绍transform属性的一些基本用法，包括平移（translation）、旋转（rotation）、缩放（scaling）和倾斜（skewing）。

一、平移（translation）平移是指把元素从其当前位置移动到另一个位置。

它可以通过translate()函数实现，该函数接受两个参数，第一个参数表示水平方向的移动量，第二个参数表示垂直方向的移动量，参数可以是负数，也可以是百分比。

下面的例子演示了如何把元素向上移动50像素： div {transform: translate(0, -50px);}二、旋转（rotation）旋转是指把元素从当前位置旋转到另一个位置。

它可以通过rotate()函数实现，该函数接受一个参数，表示旋转的角度。

下面的例子演示了如何把元素旋转90度：div {transform: rotate(90deg);}三、缩放（scaling）缩放是指根据一定的比例把元素放大或者缩小。

它可以通过scale()函数实现，该函数接受两个参数，第一个参数表示水平方向的缩放比例，第二个参数表示垂直方向的缩放比例，也可以不指定第二个参数，表示水平方向和垂直方向的缩放比例相同。

下面的例子演示了如何把元素放大到2倍：div {transform: scale(2);}四、倾斜（skewing）倾斜是指把元素从其当前位置向一个方向倾斜。

它可以通过skew()函数实现，该函数接受两个参数，第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度，也可以不指定第二个参数，表示水平方向和垂直方向的倾斜角度相同。

下面的例子演示了如何把元素倾斜45度：div {transform: skew(45deg);}五、组合变换transform属性还可以组合多个变换来影响一个元素的外观，列表中的每个变换都会应用到元素上。

transform的使用
Transform是一种常用的CSS属性，它可以对HTML元素进行平移、旋转、缩放和斜切等操作。

使用Transform属性可以轻松地创建动画效果和交互效果，提升网页的用户体验。

Transform属性包括translate、rotate、scale和skew等多种值，可以通过CSS或者JavaScript进行设置。

其中translate用于平移元素，rotate用于旋转元素，scale用于缩放元素，skew用于斜切元素。

Transform属性还可以与Transition和Animation属性配合使用，实现更加复杂的动画效果。

除了普通的Transform属性，CSS3还引入了3D Transform属性，可以通过rotateX、rotateY、rotateZ、translateX、translateY、translateZ、scaleX、scaleY、scaleZ等值对元素进行3D效果的转换。

3D Transform属性配合Perspective属性可以实现更加逼真的3D效果。

使用Transform属性可以让网页更加生动有趣，但是需要注意的是，过度使用Transform会影响网页性能和加载速度，导致用户体验下降。

因此，在使用Transform属性时，需要谨慎使用，避免过多的动画效果。

- 1 -。

transform 使用方法(一)Transform 使用方法一、transform 介绍在CSS中，transform属性用于转换元素的形状、大小或位置。

它是一种非常有用的CSS特性，可以通过一些简单的操作来实现各种动画效果。

二、常见的 transform 方法1. translate()translate()方法用于移动元素的位置。

它接受两个参数，分别是水平方向的位移和垂直方向的位移。

例如：transform: translate(50px, 100px);这个例子将元素在水平方向上向右移动50个像素，在垂直方向上向下移动100个像素。

2. rotate()rotate()方法用于旋转元素。

它接受一个参数，表示旋转的角度。

例如：transform: rotate(45deg);这个例子将元素顺时针旋转45度。

3. scale()scale()方法用于缩放元素的大小。

它接受两个参数，分别是水平方向的缩放比例和垂直方向的缩放比例。

例如：transform: scale(, );这个例子将元素在水平方向上放大倍，在垂直方向上缩小倍。

4. skew()skew()方法用于倾斜元素。

它接受两个参数，分别是水平方向的倾斜角度和垂直方向的倾斜角度。

例如：transform: skew(30deg, -10deg);这个例子将元素在水平方向上向右倾斜30度，在垂直方向上向上倾斜10度。

5. matrix()matrix()方法用于通过矩阵变换来实现复杂的转换效果。

它接受六个参数，分别是变换矩阵的各个元素。

例如：transform: matrix(1, 0, 0, 1, 100, 200);这个例子将元素在水平方向上平移100个像素，在垂直方向上平移200个像素。

三、transform 的应用场景transform属性可以应用于各种元素，常见的应用场景有：•实现动画效果：通过不同的transform方法组合使用，可以实现元素平滑的移动、旋转、缩放和倾斜等动画效果。

CSS3中的transform变形 在CSS3中，⽤Transform功能可以实现⽂字或图像的旋转、缩放、倾斜、移动这四种类型的变形，这四种变形分别使⽤rotate、scale、skew和translate这四种⽅法来实现。

将这四种变形结合使⽤，就会产⽣不同的效果，使⽤顺序不同，产⽣的效果是不⼀样的。

⽬前浏览器⽀持情况：Safari 3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE9+ ⼀、旋转： CSS中使⽤rotate⽅法来实现对元素的旋转，在参数中加⼊⾓度值，旋转⽅式为顺时针旋转。

例⼀：⼀个黄⾊的div元素，通过在样式代码中使⽤“transform: rotate(45deg)”，语句使这个div元素顺时针旋转45度。

deg是CSS3的“Values and Units”模块中定义的⼀个⾓度单位。

代码清单1：1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8"/>5<title>Transform旋转</title>6<style>7 div {8 width: 300px;9 margin: 150px auto;10 background-color: yellow;11 text-align: center;12 -webkit-transform: rotate(45deg);/* for Chrome || Safari */13 -moz-transform: rotate(45deg);/* for Firefox */14 -ms-transform: rotate(45deg);/* for IE */15 -o-transform: rotate(45deg);/* for Opera */16}17</style>18</head>19<body>20<div>黄⾊div</div>21</body>22</html>运⾏结果（Chrome 14）: ⼆、缩放： scale⽅法实现⽂字或图像的缩放效果，参数中指定缩放倍率，例如：“scale(0.5)”表⽰缩⼩50%，参数可以是整数，也可以是⼩数。

值描述translate(x ,y )定义 2D 转换，沿着 X 和 Y 轴移动元素。

translateX(n )定义 2D 转换，沿着 X 轴移动元素。

translateY(n )定义 2D 转换，沿着 Y 轴移动元素。

scale(x ,y )定义 2D 缩放转换，改变元素的宽度和⾼度。

scaleX(n )定义 2D 缩放转换，改变元素的宽度。

scaleY(n )定义 2D 缩放转换，改变元素的⾼度。

rotate(angle )定义 2D 旋转，在参数中规定⾓度。

rotateX()定义 3D 旋转，沿 X 轴。

rotateY()定义 3D 旋转，沿 Y 轴。

skew(x-angle ,y-angle )定义 2D 倾斜转换，沿着 X 和 Y 轴。

skewX(angle )定义 2D 倾斜转换，沿着 X 轴。

skewY(angle )定义 2D 倾斜转换，沿着 Y 轴。

css3中2D 转换之有趣的transform 形变在CSS3中，transform 属性应⽤于元素的2D 或3D 转换，可以利⽤transform 功能实现⽂字或图像的旋转、缩放、倾斜、移动这4中类型的形变处理语法：div {transform : none|transform-functions ;}transform 属性可以指定为关键字值none 或⼀个或多个<transform-function>值注意：当transform 有多个属性值时要⽤空格隔开属性值：下⾯对这些属性值进⾏⼀⼀讲解：⼀、rotate （旋转）rotate(angle )通过指定的⾓度参数对原元素指定⼀个2D 旋转，angle 代表旋转⾓度：正值表⽰顺时针旋转、负值表⽰逆时针旋转单位：deg(⾓度)、rad(弧度)、grad(梯度)、turn(圈)转换：弧度 = ⾓度*π/180<div class ="box"></div >.box { width : 200px ;height : 200px ;background-color : #B39DDB ; transition : .2s ; /* 过渡属性 */}.box:hover {transform : rotate(30deg); /* 顺时针旋转30度 */}这⾥⽤了下 过渡属性，不然在形变时会很⽣硬效果如下：⽽rotateX 和rotateY 是围绕X 轴和Y 轴旋转的，上⾯这个案例可以看做是围绕Z 轴旋转，⼤家可以脑构⼀下三维坐标系，我们眼睛所看到屏幕的⽅向就可以当做Z 轴rotateX围绕X轴旋转：.box:hover{transform: rotateX(45deg); /* x轴旋转45度 */}rotateY围绕Y轴旋转：.box:hover{transform: rotateY(45deg); /* Y轴旋转45度 */}⼆、translate（位移）translate()这个 CSS 函数在⽔平和/或垂直⽅向上重新定位元素translate(x,y)对元素同时向X轴和Y轴移动，值为负数则反⽅向移动translateX()元素在X轴移动translateY()元素在Y轴移动.box:hover{transform: translate(40px,80px); /* 向X轴移动+40px，向y轴移动+80px */ }效果如下：注意：如果translate()值传递⼀个值，则默认和translateX()效果⼀致translateX()元素在X轴移动.box:hover{transform: translateX(50px); /* 向X轴移动+50px */}效果如下：translateY()元素在Y轴移动.box:hover{transform: translateY(50px); /* 向Y轴移动+50px */}效果如下：三、scale（缩放）该变换通过⼀个⼆维向量确定在⼀个⽅向缩放的多少当坐标值处于区间 [-1, 1]之外时，该变换将在相应的坐标⽅向上放⼤该元素当处在区间之中时，该变换将在相应的坐标⽅向上缩⼩该元素当值为1时将不进⾏任何处理当为负数时，将进⾏像素点反射之后再进⾏⼤⼩的修改。

css3通过scale（）、rotate（）实现放⼤、旋转⼀、scale()⽅法缩放，指的是“缩⼩”和“放⼤”。

在CSS3中，我们可以使⽤scale()⽅法来将元素根据中⼼原点进⾏缩放。

跟translate()⽅法⼀样，缩放scale()⽅法也有3种情况：（1）scaleX(x)：元素仅⽔平⽅向缩放（X轴缩放）；（2）scaleY(y)：元素仅垂直⽅向缩放（Y轴缩放）；（3）scale(x,y)：元素⽔平⽅向和垂直⽅向同时缩放（X轴和Y轴同时缩放）；transform:scaleX(x)说明：x表⽰元素沿着⽔平⽅向（X轴）缩放的倍数，如果⼤于1就代表放⼤；如果⼩于1就代表缩⼩。

⼤家想想倍数是怎样⼀个概念就很好理解了。

transform:scaleY(y)说明：y表⽰元素沿着垂直⽅向（Y轴）缩放的倍数，如果⼤于1就代表放⼤；如果⼩于1就代表缩⼩。

transform:scale(x,y)说明：x表⽰元素沿着⽔平⽅向（X轴）缩放的倍数，y表⽰元素沿着垂直⽅向（Y轴）缩放的倍数。

注意，Y是⼀个可选参数，如果没有设置Y值，则表⽰X、Y两个⽅向的缩放倍数是⼀样的（同时放⼤相同倍数）。

举例<style type="text/css">.main{margin:100px auto;width:300px;height:200px;border:1px dashed gray;}#jxh51{width:300px;height:200px;color:white;text-align:center;transform:scaleX(1.5);-webkit-transform:scaleX(1.5);-moz-transform:scaleX(1.5);}#jxh2j{width:300px;height:200px;color:white;text-align:center;}</style>scale()实现放⼤功能通过rotate()实现旋转功能旋转rotate()函数通过指定的⾓度参数使元素相对原点进⾏旋转。

CSS3中的transform属性进⾏2D和3D变换的基本⽤法transform 2D之前有看到google将搜寻的页⾯倾斜，这个功能透过CSS3的transform就可以达成CSS3 2D transform特性可以旋转、倾斜、放⼤缩⼩和移动元素，对⽹页的视觉观感上提供很⼤的帮助使⽤⽅法：CSS Code复制内容到剪贴板1. transform: transform-function;2. -webkit-transform: transform-function; /* Safari and Chrome */3. -moz-transform: transform-function; /* Firefox */4. -o-transform: transform-function; /* Opera */5. -ms-transform:transform-function; /* IE9以上 */变形函式 transform-function：函式⾥的θ参数要有单位，有三种单位可以使⽤：deg (⾓度) 、 rad (弧度) 、 grad (梯度)。

1.rotate(θ)：以参考点为中⼼轴 2D 旋转θ度。

2.skew(θx,θy)：以参考点为中⼼轴沿着横向倾斜θx 度、纵向倾斜θy 度( 可以拆开成skewX(θ)和skewY(θ) )3.scale(x,y)：指定元素由参考点 2D 横向缩放 x 倍、纵向缩放 y 倍( 可以拆开成scaleX(x)和scaleY(y)，此函式的参数不需要单位 )4.translate(x,y)：指定元素由参考点 2D 横向移动 x 距离、纵向移动 y 距离( 可以拆开成translateX(x)和translateY(y)，此函式的参数单位为px )5.matrix(a,b,c,d,e,f)：指定元素由参考点依据数学变形矩阵 (transformation matrix) 的 6 个参数值产⽣ 2D 变形( 此函式的参数为数字，不需要单位 )SampleJavaScript Code复制内容到剪贴板1. /* Safari and Chrome ⽹页倾斜50度 */2. -webkit-transform: rotate(50deg);transform 3D & perspectiveCSS3的transform可以做2D的操作，当然也有3D但需要再⼀个拥有perspective属性的⽗元素才能显现3D的效果例如：XML/HTML Code复制内容到剪贴板1. <div id="div1"><!-- perspective -->2. <div id="div2">3D</div><!-- transform -->3. </div>perspective属性固名思义就是透视的意思；该属性可以定义3D视觉的⾓度，让底下⼦元素使⽤3D特效时能够完整显⽰。