CSS3之2D转换模块

最新推荐文章于 2022-02-09 17:19:26 发布

407指导员

最新推荐文章于 2022-02-09 17:19:26 发布

阅读量254

点赞数

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/110097219

版权

CSS3 专栏收录该内容

77 篇文章 0 订阅

订阅专栏

CSS3之2D转换模块

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。

Chrome 和 Safari 需要前缀 -webkit-。

Internet Explorer 9 需要前缀 -ms-。

主要学习以下五个方法：

translate()
rotate()
scale()
skew()
matrix()

translate() 方法

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数：

transform: translate(-70px, 20px);

快捷键：trf:t+table

rotate() 方法

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。单位：deg度数

格式

transform: rotate(45deg);

快捷键：trf:r+table

scale() 方法

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数分别是沿x,y放大倍数，如果xy方向缩放倍数一样可以简写一个参数。

transform: scale(0.8,2);

快捷键：trf:sc+tablec

skew() 方法

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

transform: skew(30deg,20deg);

可以单独使用:

transform: skewX(30deg);

matrix() 方法

matrix() 方法把所有 2D 转换方法组合在一起。

matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。但是这参数太麻烦，要计算矩阵。。。

可以学习一下大佬：https://www.cnblogs.com/bbcfive/p/11155824.html

相关代码目前在这： https://github.com/karasjs/karas/blob/master/src/style/transform.js#L4-L55

连写方式

我们还可以用函数名的方式连写，而躲避了maxtrix方法。

transform: rotate(45deg) translate(-70px, 20px) scale(0.8, 2) skew(30deg, 20deg);

连写方式之间不要逗号，空格隔开即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D转换模块</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            width: 800px;
            height: 600px;
            border: 1px solid #000;
            margin: 0 auto;
        }

        ul li {
            list-style: none;
            width: 100px;
            height: 50px;
            background-color: skyblue;
            margin: 0 auto;
            margin-top: 50px;
            text-align: center;
            line-height: 50px;
        }

        ul li:nth-child(2) {
            transform: rotate(45deg);
        }

        ul li:nth-child(3) {
            transform: translate(-70px, 20px);
        }

        ul li:nth-child(4) {
            transform: scale(0.8, 2);
        }

        ul li:nth-child(5) {
            transform: skew(30deg, 20deg);
            /*transform: skewX(30deg);*/
        }

        ul li:nth-child(6) {
            transform: rotate(45deg) translate(-70px, 20px) scale(0.8, 2) skew(30deg, 20deg);
        }
    </style>
</head>
<body>
<ul>
    <li>正常的</li>
    <li>旋转的</li>
    <li>平移的</li>
    <li>缩放的</li>
    <li>翻转的</li>
    <li>综合的</li>
</ul>
</body>
</html>

在这里插入图片描述

注意点

1.2d转换模块修改元素坐标系的方向。再进行平移是按照之后的x,y方向进行平移的。如下图

##### 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 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

407指导员

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3之2D转换模块

CSS3之2D转换模块通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。Chrome 和 Safari 需要前缀 -webkit-。Internet Explorer 9 需要前缀 -ms-。主要学习以下五个方法：translate()rotate()scale()skew()matrix()translate() 方法通过 translate()
复制链接

扫一扫