2D转换

9个月前 (08-31) 613次浏览 已收录 0个评论

2D转换-移动translate

可以改变元素在页面中的位置,类似定位。

transform:translate(x,y);

特点:

  • 不会影响其他元素的位置
  • 可以使用百分号,且translate中的百分比单位是相对于自身元素的translate(50%,50%);
  • 对行内元素没有效果
  • 经常与过渡一起使用

 实现居中

<!DOCTYPE html>
<html lang="en">
<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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 500px;
            height: 500px;
            position: relative;
            background-color: rgb(131, 0, 238);
        }
        p{
            position: absolute;
            top: 50%;
            left: 50%;
            /* 盒子往上走自己高度宽度的一半 */
            transform: translate(-50%,-50%);
            width: 200px;
            height: 200px;
            background-color: rgb(189, 0, 0);
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>
结果演示
此居中通过定位和移动来实现居中,建议使用

旋转rotate

语法:

transform:rotate(度数)

特点:

  • rotate里面跟度数,单位是deg,比如rotate(45deg)
  • 角度为正值时,顺时针,反之逆时针
  • 默认旋转的中心点是元素的中心点

设置中心点

语法:

transform-origin:x y;

特点:

  • x y默认转换的中心点是元素的中心点(50% 50%)
  • 还可以给x y设置像素或者方位名词(例如左下角:left bottom)
<!DOCTYPE html>
<html lang="en">
<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>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: rgb(241, 0, 0);
            transition: all 0.3s;
        }
        div:hover{
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
结果演示

缩放scale

语法:

transform:scale(x,y)

特点:

  • transfom:scale(2,2) 宽和高都放大了2倍
  • transform:scale(2)等价于(2,2),即等比例缩放
  • (0.5,0.5)缩小、(1,1)不缩放
  • 默认是以中心点缩放的,并且不影响其他盒子
  • 设置缩放中心点:transform-origin: left bottom;
修改长宽来进行缩放的缺点:会影响其他盒子,只会通过 左右下 来进行缩放


scale的优势:不影响其他盒子,并且是通过 上下左右 来进行缩放的

转换综合写法注意

  • 同时使用多个转换时,格式为:transform:translate() rotate() scale()…等
  • 书写顺序会影响转换的效果
  • 同时有位移和其他属性的时候,要把位移写在前面

渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:2D转换
喜欢 (0)

您必须 登录 才能发表评论!