java rotatetransition_【CSS3 transform属性和过渡属性详解】

旧城等待， 2022-11-08 14:10 199阅读 0赞

CSS3transform属性详解

transform字面上就是变形，改变的意思。

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

2D Transform 方法

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

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

scale() 该元素增加或减少的大小，取决于宽度(X轴)和高度(Y轴)的参数。

matrix() 和2D变换方法合并成一个。

matrix 方法有六个参数，包含旋转，缩放，移动(平移)和倾斜功能。

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

skewX();表示只在X轴(水平方向)倾斜。

skewY();表示只在Y轴(垂直方向)倾斜。

下面我们一个个来介绍它们：

一、移动translate

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

如：translate : translate(100px,20px);

![20180111001323535084.png][]

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

如：transform:translateX(100px);

![20180111001323811462.png][]

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

如：transform:translateY(20px);

![20180111001323952092.png][]

二、旋转rotate

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

如：transform:rotate(30deg);

![20180111001324072214.png][]

三、缩放scale

注意：默认值是1，它的值放大是比1大，缩小比1小。

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

如：transform:scale(2,1.5);

![20180111001324236283.png][]

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

如：transform:scaleX(2):

![20180111001324384726.png][]

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

如：transform:scaleY(2):

![20180111001324518520.png][]

四、扭曲skew

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

如：transform:skew(30deg,10deg);

![20180111001324668917.png][]

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

如：transform:skewX(30deg);

![20180111001324824196.png][]

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

如：transform:skewY(10deg);

![20180111001324963850.png][]

改变元素基点transform-origin

2D 转换元素能够改变元素 x 和 y 轴。

值

描述

x-axis

定义视图被置于 X 轴的何处。可能的值：

left

center

right

length

y-axis

定义视图被置于 Y 轴的何处。可能的值：

top

center

bottom

length

3D 转换属性

属性

描述

transform

向元素应用 2D 或 3D 转换。

transform-origin

允许你改变被转换元素的位置。

transform-style

规定被嵌套元素如何在 3D 空间中显示。

perspective

规定 3D 元素的透视效果。

perspective-origin

规定 3D 元素的底部位置。

backface-visibility

定义元素在不面对屏幕时是否可见。

transform-style: flat|preserve-3d;   表示所有子元素在3D空间中呈现。

如：

![20180111001325130849.png][]

perspective: number|none;   设置从何处查看一个元素的角度

如：perspective: 500;

![20180111001325278315.png][]

3D Transform 方法

2D变形的坐标轴是平面的，只存在x轴和y轴，而3D变形的坐标轴则是x、y、z三条轴组成的立体空间，x轴正向、y轴正向、z轴正向分别朝向右、下和屏幕外。

(下面是我之前看的一个不错的例子，借过来分享到这。)

例如，下面一个包含两个变换函数的transform的效果(gif)：

![20180111001325495120.gif][]

![bVrVnm][]

如果交换这两个变换函数的顺序，是这样的效果：

![20180111001325755873.gif][]

![bVrVnn][]

可以看到，由于坐标系会随着每一次变换发生改变，因此不同顺序的情况下，元素最终的位置也不同。

CSS3 过渡

属性

描述

transition

简写属性，用于在一个属性中设置四个过渡属性。

transition-property

规定应用过渡的 CSS 属性的名称。

transition-duration

定义过渡效果花费的时间。默认是 0。

transition-timing-function

规定过渡效果的时间曲线。默认是 "ease"。

transition-delay

规定过渡效果何时开始。默认是 0。

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property

transition-duration

transition-timing-function

transition-delay

如：

.box\{width:100px;height:100px;background:red;transition:width 2s;-moz-transition:width 2s; /\*Firefox 4\*/-webkit-transition:width 2s; /\*Safari and Chrome\*/-o-transition:width 2s; /\*Opera\*/

\}.box:hover\{width:300px;

效果就是这样的，它在宽度变成300px时会有一个过程，就是过渡。

今天的内容就是这些~~~

[20180111001323535084.png]: /images/20221023/42b61578867e45098081144f10a8cb8e.png
[20180111001323811462.png]: /images/20221023/04802c998aa446b1a8f06cbcc7b52935.png
[20180111001323952092.png]: /images/20221023/655bd7b4fa1b4607ab7293ca7b9984b5.png
[20180111001324072214.png]: /images/20221023/f126967cac1e46a2839f75ebd8f73db6.png
[20180111001324236283.png]: /images/20221023/9f449d95ede447d4ab39185311d0b0eb.png
[20180111001324384726.png]: /images/20221023/97d676c49dce40c790a56ed9f6905c72.png
[20180111001324518520.png]: /images/20221023/576671a7969b409590b3721c46b779f4.png
[20180111001324668917.png]: /images/20221023/3068edc569514d8ca26d5e554ef4f2d0.png
[20180111001324824196.png]: /images/20221023/770d276254684b1fa94b1f894d937c25.png
[20180111001324963850.png]: /images/20221023/2d4aaaa6a55849f4a2568ac6ee7bdeec.png
[20180111001325130849.png]: http://image.mamicode.com/info/201801/20180111001325130849.png
[20180111001325278315.png]: http://image.mamicode.com/info/201801/20180111001325278315.png
[20180111001325495120.gif]: http://image.mamicode.com/info/201801/20180111001325495120.gif
[bVrVnm]: /images/20221023/756215960d9e4dd7afc048f5caa9f66a.png
[20180111001325755873.gif]: http://image.mamicode.com/info/201801/20180111001325755873.gif
[bVrVnn]: /images/20221023/7f1c321a46e449f192de60fad99e0408.png