关于2D转换translate，rotate，scale

-橙子不甜

已于 2022-04-14 22:44:44 修改

阅读量340

点赞数 1

文章标签： css

于 2022-04-13 11:17:28 首次发布

本文链接：https://blog.csdn.net/qq_51874993/article/details/124138620

版权

2D转换

2D转换之位移（translate）

移动盒子的位置几种方法：添加外边距，定位，2D转换移动

transform: translate(10px,10px);/*注意是向右和向下是正值*/
transform: translateX(10px);/*在X方向上移动*/
transform: translateY(10px);

2D转换之旋转（rotate）

 transform: rotate(45deg);

默认的盒子旋转中心点为盒子正中央，当然也可以自行选择旋转中心点。当你自己设置时需要在css里面添加transform-origin: x y;

注意，和定位一样，此时中间用空格隔开。x y可以是百分比如50% 50%，也可以是描述方位的名词，如left buttom，还可以跟具体的像素，如 50px 50px。

2D转换之缩放（scale）

给元素添加此元素可使盒子放大缩小

 transform: scale(2,2);

transform: scale(x,y)它的x，y适用逗号隔开的要与rotate分开

1.scale(x,y)中的想x，y表示放大的倍数，x表示宽的放大倍数，y表示高的放大倍数

2.缩小，当x，y的值小于1时即可缩小盒子

3.同rotate一样也可以通过transform-origin: x y;属性来控制放大缩小的中心点，默认放大缩小的位置为盒子正中

4.等比例缩放时，只需要给scale赋一个值就行，例：transform: scale(2); 就是等比缩放

5.scale与上两个都不影响其他盒子

缩放的案例

按钮缩放案例

div {
            text-align: center;
        }
div ul li {
            float: left;
            margin: 5px;
            width: 40px;
            height: 40px;
            line-height: 40px;/*使文字居中显示*/
            border: 2px solid rgb(41, 163, 49) ;
            list-style: none;/*去掉小圆点*/
            border-radius: 25px;
            transition: all 0.4;/*用过渡可以使转换更加自然*/
        }
li:hover {
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>

2D转换的综合写法

 transform: translate() rotate() scale();

注意位移要写在其他两个属性之前，否则会达不到理想效果。剩余两个属性可调换位置

-橙子不甜

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于2D转换translate，rotate，scale

2D转换2D转换之位移（translate）移动盒子的位置几种方法：添加外边距，定位，2D转换移动transform: translate(10px,10px);/*注意是向右和向下是正值*/transform: translateX(10px);/*在X方向上移动*/transform: translateY(10px);2D转换之旋转（rotate） transform: rotate(45deg);默认的盒子旋转中心点为盒子正中央，当然也可以自行选择旋转中心点。当你自己设置时需要在
复制链接

扫一扫