【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轴(垂直⽅向)倾斜。
下⾯我们⼀个个来介绍它们：
⼀、移动translate
1、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);
⼆、旋转rotate
rotate(angle)    定义 2D 旋转，在参数中规定⾓度。
如：transform:rotate(30deg);
三、缩放scale
注意：默认值是1，它的值放⼤是⽐1⼤，缩⼩⽐1⼩。
1、scale(x,y)  定义 2D 缩放转换，改变元素的宽度和⾼度。如：transform:scale(2,1.5);
2、scaleX(n)  定义 2D 缩放转换，改变元素的宽度。
如：transform:scaleX(2):
3、scaleY(n)  定义 2D 缩放转换，改变元素的⾼度。
如：transform:scaleY(2):
四、扭曲skew
1、skew(x-angle,y-angle)  定义 2D 倾斜转换，沿着 X 和 Y 轴。如：transform:skew(30deg,10deg);
2、skewX(angle)  定义 2D 倾斜转换，沿着 X 轴。
如：transform:skewX(30deg);
3、skewY(angle)  定义 2D 倾斜转换，沿着 Y 轴。
属性描述
transform 向元素应⽤ 2D 或 3D 转换。transform-origin 允许你改变被转换元素的位置。transform-style 规定被嵌套元素如何在 3D 空间中显⽰。perspective 规定 3D 元素的透视效果。perspective-origin 规定 3D 元素的底部位置。
backface-visibility 定义元素在不⾯对屏幕时是否可见。
如：transform:skewY(10deg);
改变元素基点transform-origin
2D 转换元素能够改变元素 x 和 y 轴。
3D 转换属性
transform-style: flat|preserve-3d;  表⽰所有⼦元素在3D 空间中呈现。
如：
perspective: number|none;  设置从何处查看⼀个元素的⾓度
如：perspective: 500;
3D Transform ⽅法
2D变形的坐标轴是平⾯的，只存在x轴和y轴，⽽3D变形的坐标轴则是x、y、z三条轴组成的⽴体空间，x轴正向、y轴正向、z轴正向分别朝向右、下和屏幕外。
（下⾯是我之前看的⼀个不错的例⼦，借过来分享到这。）
例如，下⾯⼀个包含两个变换函数的transform的效果（gif）：
属性描述
transition 简写属性，⽤于在⼀个属性中设置四个过渡属性。
transition-property 规定应⽤过渡的 CSS 属性的名称。transition-duration 定义过渡效果花费的时间。默认是 0。transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。transition-delay
规定过渡效果何时开始。默认是 0。
cssclass属性
如果交换这两个变换函数的顺序，是这样的效果：
可以看到，由于坐标系会随着每⼀次变换发⽣改变，因此不同顺序的情况下，元素最终的位置也不同。
CSS3 过渡
transition 属性是⼀个简写属性，⽤于设置四个过渡属性：
transition-property transition-duration
transition-timing-function
transition-delay
如：
<!DOCTYPE html>
<html>
<head>
<style>
.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;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
效果就是这样的，它在宽度变成300px时会有⼀个过程，就是过渡。今天的内容就是这些~~~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。