2D模块转换

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸，转换是使元素改变形状、尺寸和位置的一种效果。

格式：

transform:rorate(角度):旋转；

transform:translate(水平方向的距离，垂直方向的距离):平移；

transform:scale(宽度，高度):缩放。

当同时有多个转换属性时，使用空格来隔开。

在旋转之后，x轴与y轴也随之旋转，在进行平移操作时是以x轴、y轴为参照的。

当宽度与高度缩放程度相同时，可以只写一个值。例如，宽度与高管同时放大2倍，scale(2)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            height: 700px;
            width: 700px;
            border: 1px solid;
            margin: 200px auto;
        }

        ul {
            list-style: none;
        }

        ul li {
            background-color: red;
            height: 30px;
            width: 100px;
            margin-top: 60px;
        }

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

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

        li:nth-child(4) {
            transform: scale(1, 1.5);
        }

        li:nth-child(5) {
            transform: rotate(30deg) translate(30px);
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>标准</li>
        <li>旋转</li>
        <li>平移</li>
        <li>缩放</li>
        <li>综合</li>
    </ul>
</div>
</body>
</html>

2D模块转换

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸，转换是使元素改变形状、尺寸和位置的一种效果。

格式：

相关推荐