CSS3的2D变形

最新推荐文章于 2023-10-22 11:56:31 发布

原创最新推荐文章于 2023-10-22 11:56:31 发布 · 469 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

HTML、CSS 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了CSS3中的变形属性，包括translate、translateX、translateY、scale、scaleX、scaleY、skew、skewX、skewY和rotate等，以及它们在元素位置、尺寸和角度变化上的应用。通过实例展示了如何使用这些属性实现元素的平移、缩放、倾斜和旋转效果。

CSS3变形是平移、旋转、缩放、倾斜效果的集合。设置变形函数时可以是一个属性，也可以是多个，中间以空格隔开。

transform：变形。属性值：

translate(x,y)：平移，基于X、Y坐标重新定位元素的位置。（x为X轴（横坐标）移动的向量长度、y为Y轴（横坐标）移动的向量长度。）

translateX(x)：X轴移动x，Y轴不移动。

translateY(y)：Y轴移动y，X轴不移动。

scale(x,y)：缩放，可以使任意元素对象尺寸发生变化。（从中心开始向X轴放大x倍，Y轴放大y倍。）

scaleX(x)：表示只设置X轴的缩放。

scaleY(y)：表示只设置Y轴的缩放。

skew(x,y)：倾斜，取值是一个度数值，单位：deg（表示度）。（x为水平方向（X轴）的倾斜角度、y为垂直方向（Y轴）的倾斜角度。）

skewX（x）：表示只设置X轴的倾斜。

skewY（y）：表示只设置Y轴的倾斜。

rotate(α)：旋转，只会是元素进行旋转，而不会改变元素的形状，取值也是一个度数αdeg。（绕着中心点，元素相对原来中心顺时针旋转α度。）

小练习：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新书上架</title>
    <link rel="stylesheet" href="./demo1.css">
</head>
<body>
    <div class="box">
        <div class="title"></div>
        <div class="zt">
            <ul class="nf">
                <li class="fl">
                    <img src="./imgs/book2.jpg">
                    <p class="yi">来得及</p>
                    <p class="er">何炅</p>
                    <p><span class="san">￥40.00</span><span class="si">￥43.30</span></p>
                </li>
                <li class="fl">
                    <img src="./imgs/book2.jpg">
                    <p class="yi">来得及</p>
                    <p class="er">何炅</p>
                    <p><span class="san">￥40.00</span><span class="si">￥43.30</span></p>
                </li>
                <li class="fl">
                    <img src="./imgs/book2.jpg">
                    <p class="yi">来得及</p>
                    <p class="er">何炅</p>
                    <p><span class="san">￥40.00</span><span class="si">￥43.30</span></p>
                </li>
                <li class="fl">
                    <img src="./imgs/book2.jpg">
                    <p class="yi">来得及</p>
                    <p class="er">何炅</p>
                    <p><span class="san">￥40.00</span><span class="si">￥43.30</span></p>
                </li>
                <li class="fl">
                    <img src="./imgs/book2.jpg">
                    <p class="yi">来得及</p>
                    <p class="er">何炅</p>
                    <p><span class="san">￥40.00</span><span class="si">￥43.30</span></p>
                </li>
                <li class="fl">
                    <img src="./imgs/book2.jpg">
                    <p class="yi">来得及</p>
                    <p class="er">何炅</p>
                    <p><span class="san">￥40.00</span><span class="si">￥43.30</span></p>
                </li>
                <li class="fl">
                    <img src="./imgs/book2.jpg">
                    <p class="yi">来得及</p>
                    <p class="er">何炅</p>
                    <p><span class="san">￥40.00</span><span class="si">￥43.30</span></p>
                </li>
                <li class="fl">
                    <img src="./imgs/book2.jpg">
                    <p class="yi">来得及</p>
                    <p class="er">何炅</p>
                    <p><span class="san">￥40.00</span><span class="si">￥43.30</span></p>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

样式：

*{margin: 0;padding: 0;list-style: none;}
.box{
    width: 866px;
}
.box .title{
    width: 866px;
    height: 66px;
    background: url(./imgs/new_book.png) no-repeat 5px center;
}
.box .zt .nf .fl{
    float: left;
    margin-left: 5px;
    margin-right: 40px;
}
.box .zt .nf::after{
    content: ' ';
    display: block;
    clear: both;
}
.box .zt .nf .fl p{
    padding-left: 18px;
}
.box .zt .nf .fl .yi{
    font-weight: 700;
    font-size: 13px;
}
.box .zt .nf .fl .er{
    font-size: 12px;
    color: #C0C0C0;
    margin-top: 15px;
}
.box .zt .nf .fl .san{
    font-size: 14px;
    font-weight: 700;
    color: red;
}
.box .zt .nf .fl .si{
    font-size: 14px;
    font-weight: 700;
    color: #ccc;
    text-decoration: line-through;
    padding-left: 15px;
}

总结：望各位大佬指正。