CSS笔记——transform 2D/移动/旋转/缩放

视频地址

一、2D转换移动 translate

类似于定位

1.1 语法

transform: translate(x,y);

transform: translateX(n);

transform: translateY(n);

1.2 注意点

• 不会影响到其他元素的位置
• 百分比单位是相对于自身元素的大小
• 对行内标签没有效果

1.3 应用效果

1. 鼠标经过，元素的上浮效果。
2. 百分比单位可用于某些情况下的居中效果。（先走大盒子一半，再走自身大小一半）

二、2D转换旋转 rotate

再二维平面内，顺时针或逆时针旋转。

2.1 语法

transform:rotate(度数)

2.2 注意点

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

2.3 转换旋转中心

transform-origin: x y;

• x yx默认值为(50% 50%)
• x y可以设置像素，方位名词（top bottom left right center）

2.4 应用

    <style>
        .rotate {
            overflow: hidden;
            height: 200px;
            width: 200px;
            border: 1px solid red;
        }
        .rotate::after {
            display: block;
            content: "";
            height: 100%;
            width: 100%;
            background: red;
            transform: rotate(180deg);
            transform-origin: left bottom;
            transition: all 1.8s;
        }
        .rotate:hover::after {
            transform: rotate(0deg);
        }
    </style>

三、2D转换缩放scale

3.1语法

transform:scale(x,y);

3.2 注意点

• x和y用逗号分隔
• scale(1,1)，宽高放大一倍，相当于没有放大
• scale(2,2)，宽高放大两倍
• scale(2)，相当于scale(2,2)
• scale(0.5 0.5),缩小
• 可以设置转换中心缩放，不影响其他盒子。

3.3 应用

1. 鼠标经过，图片放大。