2D转换模式：transform

最新推荐文章于 2022-04-21 17:14:08 发布

只字不留

最新推荐文章于 2022-04-21 17:14:08 发布

阅读量212

点赞数

本文链接：https://blog.csdn.net/qq15045846160/article/details/88639001

版权

1、transform: rotate(45deg); 旋转。
2、tranform：translate(水平方向, 垂直方向)；
正数向正方向移动，负数相反。
3、transform: scale(水平，垂直)；
第一个参数：水平
第二个参数：垂直
取值等于1，不变。
大于1，变大。
小于1，变小。
如果两个参数值相同，则可以简写一个参数。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>2D转换</title>
        <style>
            *{
                margin: 0;
                padding: 0
            }
            ul{
                width: 800px;
                height: 500px;
                border: 1px solid #000;
                margin: 0 auto;
            }
            ul li{
                list-style: none;
                width: 100px;
                height: 50px;
                background-color: pink;
                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(100px, 0px);
            }
            ul li:nth-child(4){
                transform: scale(1.5, 1);
            }
            ul li:nth-child(5){
                transform: rotate(45deg) translate(100px, 0) scale(1.5, 1.5);

            }
        </style>
    </head>
    <body>
        <ul>
            <li>正常的</li>
            <li>旋转的</li>
            <li>平移的</li>
            <li>缩放的</li>
            <li>综合的</li>
        </ul>
    </body>
</html>

/*
注意：
1.多个属性叠加时，空格隔开
2.rotate会改变坐标轴的原始方向（旋转后在平移）
*/
在这里插入图片描述

只字不留

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2D转换模式：transform

1、transform: rotate(45deg); 旋转。2、tranform：translate(水平方向, 垂直方向)；正数向正方向移动，负数相反。3、transform: scale(水平，垂直)；第一个参数：水平第二个参数：垂直取值等于1，不变。大于1，变大。小于1，变小。如果两个参数值相同，则可以简写一个参数。&lt;!DOCTYPE html&gt;&l...
复制链接

扫一扫