CSS布局--transform应用（矩形旋转、缩放、倾斜、滚动、3D转换）代码

最新推荐文章于 2024-08-26 07:28:57 发布

陌听

最新推荐文章于 2024-08-26 07:28:57 发布

阅读量6.3k

点赞数 1

分类专栏： XHTML CSS 文章标签： css

本文链接：https://blog.csdn.net/she_rryn/article/details/47705843

版权

本文介绍了CSS中用于改变元素布局的transform属性，包括translate()实现平移、rotate()实现旋转、scale()实现缩放、skew()实现倾斜以及matrix()实现复合变换。此外，还探讨了3D转换如rotateX()和rotateY()的应用，通过实例展示了如何使用这些属性改变元素的视觉效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body, div {
            margin:0;
            padding:0;
        }
        div {
            width: 100px;
            height: 100px;
            background-color: burlywood;
            margin-left: 50px;
            border: 1px solid red;
            display: inline-block;/*不换行，但是可以设置width跟height*/
        }
        /*
            translate(tx, ty)
            该函数设置html组件横向移动tx距离，纵向移动ty距离。如果ty省略那么，默认是0。
            translate(tx) -> translateX(tx)
            translate(ty) -> translateY(ty)
        */
        .translate-original {}
        .translate-now {
            -webkit-transform: translate(10px, 10px);
        }
        /*
            rotate(angle)单位是deg
            该函数设置html组件顺时针旋转angle角度
        */
        .rotate-now {