CSS3转换
转换是 CSS3 中具有颠覆性的特征之一,通过转换我们可以实现对元素的移动、缩放、转动、拉长或拉伸。
转换属性
属性 | 描述 |
---|---|
transform | 向元素应用 2D 或 3D 转换。 |
transform-origin | 允许你改变被转换元素的位置 |
2D Transform方法
函数 | 描述 |
---|---|
matrix(n,n,n,n,n,n) | 定义2D 转换,使用六个值的矩形。 |
translate(x, y) | 定义2D 转换,沿着 X 和 Y 轴移动元素。 |
translateX(n) | 定义2D 转换,沿着 X 轴移动元素。 |
translateY(n) | 定义2D 转换,沿着 Y 轴移动元素。 |
scale(x,y) | 定义2D 缩放转换,改变元素的宽度和高度(x,y是倍数值)。 |
scaleX(n) | 定义2D 缩放转换,改变元素的宽度。 |
scaleY(n) | 定义2D 缩放转换,改变元素的高度。 |
rotate(angle) | 定义2D 转换,在参数中规定角度。(角度单位deg) |
skew(x-angle, y-angle) | 定义2D 倾斜旋转,沿着 X 和 Y 轴。 |
skewX(angle) | 定义2D 倾斜转换,沿着 X 轴。 |
skewY(angle) | 定义2D 倾斜转换,沿着 Y 轴。 |
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.div {
margin: 100px auto;
background-color: red;
width: 200px;
height: 100px;
/*设置一个过渡效果*/
transition: all 1s linear;
}
.div:hover {
/*matrix(n,n,n,n,n,n)| 定义`2D`转换,使用六个值的矩形。*/
/*transform:matrix(1,2,1,0,0,0);*/
/*translate(x, y)|定义`2D`转换,沿着 X 和 Y 轴移动元素。*/
/*transform:translate(100px, 100px);*/
/*translateX(n)|定义`2D`转换,沿着 X 轴移动元素。*/
/*transform: translateX(100px);*/
/*translateY(n)|定义`2D`转换,沿着 Y 轴移动元素。*/
/*transform: translateY(100px);*/
/*scale(x,y)|定义`2D`缩放转换,改变元素的宽度和高度(x,y是倍数值)。*/
/*transform: scale(2,2);*/
/*scaleX(n)|定义`2D`缩放转换,改变元素的宽度。*/
/*transform: scaleX(2);*/
/*scaleY(n)|定义`2D`缩放转换,改变元素的高度。*/
/*transform: scaleY(2);*/
/*rotate(angle)|定义`2D`转换,在参数中规定角度。(角度单位deg)*/
/*transform: rotate(45deg);*/
/*skew(x-angle, y-angle)|定义`2D`倾斜旋转,沿着 X 和 Y 轴。*/
/*transform: skew(45deg,45deg);*/
/*skewX(angle)|定义`2D`倾斜转换,沿着 X 轴。*/
/*transform: skewX(45deg);*/
/*skewY(angle)|定义`2D`倾斜转换,沿着 Y 轴。*/
/*transform: skew(45deg);*/
}
</style>
<body>
<div class="div"></div>
</body>
</html>