CSS3-2D转换

来源：互联网发布：b站会员知乎编辑：程序博客网时间：2024/06/13 06:42

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>

阅读全文

1 0