CSS3 transform.html

最新推荐文章于 2024-07-04 15:38:12 发布

Missingmusic

最新推荐文章于 2024-07-04 15:38:12 发布

阅读量298

点赞数

本文链接：https://blog.csdn.net/Missingmusic/article/details/47380909

版权

<!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 {
            -webkit-transform: rotate(30deg);
        }
        /*
            scale(sx, sy);
            该函数设置设置HTML组件上横向缩放比为sx，纵向缩放比为sy，如果只写一个参数，sy省略，默认是1。
            另外如果你写scale(sx) 也可写作 scaleX(sx)
            scale(sy) 也可写作scaleY(sy)
        */
        .scale-now {
            -webkit-transform: scale(1.5, 0.5);
        }
        .scale-now2 {
            -webkit-transform: scale(0.5, 1.5);
        }
        /*
            skew(sx, sy)
            该函数设置html组件沿着x轴倾斜sx角度，沿着y轴倾斜sy角度
            skewX(sx) skewY(sy)
        */
        .skew-now {
            -webkit-transform: skew(45deg, 0deg);
        }
        .skew-now2 {
            -webkit-transform: skewY(45deg);
        }
        /*复合*/
        .component {
            -webkit-transform: skewY(45deg) scale(1.5, 0.5);
        }
        /*指定中心点*/
        .center {
            -webkit-transform: skewY(45deg);
            -webkit-transform-origin: left top;
        }
    </style>
</head>
<body>
    <div>文字</div>
    没有变动
    <div>文字</div>
    <hr/>
    <div>文字</div>
    移动10px 10px
    <div class="translate-now">文字</div>
    <hr/>
    <div>文字</div>
    旋转30度
    <div class="rotate-now">文字</div>
    <hr/>
    <div>文字</div>
    缩放1.5, 0.5
    <div class="scale-now">文字</div>
    <hr/>
    <div>文字</div>
    缩放0.5, 1.5
    <div class="scale-now2">文字</div>
    <hr/>
    <div>文字</div>
    x轴倾斜45度
    <div class="skew-now">文字</div>
    <hr/>
    <div>文字</div>
    y轴倾斜45度
    <div class="skew-now2">文字</div>
    <hr/>
    <div>文字</div>
    y轴倾斜45度 并且缩放1.5，0.5
    <div class="component">文字</div>
    <hr style="margin-top: 50px"/>
    <div>文字</div>
    y轴倾斜45度 中心为left top
    <div class="center">文字</div>
</body>
</html>

Missingmusic

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 transform.html

html>html>head lang="en"> meta charset="UTF-8"> title>title> style type="text/css"> body, div { margin:0; padding:0; } div { w
复制链接

扫一扫