Day 25 CSS3 < 2D转换 transform>

转换 (transform)实现元素的位移、旋转、缩放等效果，可以简单理解为变形。

• 移动 translate
• 旋转 rotate
• 缩放 scale

1.2D转换之移动(translate)

2D移动式转换里面的一种功能，可以改变元素在页面中的位置 类似定位

语法:

transform:translate(x,y);或着分开写
transform:translateX(n);
transform:translateY(n);

注意事项:

• 定义2D转换中的移动，沿着X和Y轴移动元素
• translate最大的优点 : 不会影响到其他元素的位置
• translate中的百分比单位是相对於自身元素的translate : (50% 50%);
• 对行内标签没有效果

CSS:
    <style>
        /* 移动盒子的位置: 定位 盒子的外边距 2D转换移动 */
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* transform:translate(x,y)
            transform: translate(500px, 0); */
        }

        div:nth-child(2) {
            background-color: purple;
        }

        div:first-child {
            transform: translate(30px, 30px);
        }
    </style>
    
HTML:
    <div>粉色盒子移动</div>
    <div>紫色盒子</div>

translate 移动

2.2D转换之旋转 rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

语法:

transform:rotate(度数)

注意事项:

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

CSS:
    div {
      height:400px;
        width: 300px;
        /* 顺时针旋转30度 单位为deg */
        /* transform: rotate(30deg); */
        border-radius: 50%;
        border: 5px solid pink;
        /* 过度写到本身上 谁做动画给谁加 */
        transition: all 5s;
    }

    div:hover {
        transform: rotate(120deg);
    }
    
HTML:
    <div> </div>

rotate 旋转

3.变更中心点 transform-orgin

设置元素的中心点

语法:

transform-origin: x y;

注意事项:

• 注意後面的参数x和y用空格隔开
• x y 默认转换的中心点是元素的中心点 (50% 50%)
• 还可以给x y 设置 像素或者方位名词 (top bottom left right center)

transform-origin 变更中心点

4.2D转换之缩放 scale

只要给元素添加上scale就能控制他放大还是缩小

语法:

transform:scale(x,y);

注意事项:

• 注意其中x和y是用逗号分隔
• transform:scale(1,1) : 宽和高都放大了一倍，相对於没有放大
• transform:scale(2,2) : 宽和高都放大了两倍
• transform:scale(2) : 只写一个参数 第二个参数则和第一个参数一样，相当於scale(2,2)
• transform:scale(0.5,0.5): 缩小
• scale缩放的最大优势 : 可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

scale 缩放

5.2D转换简写

语法:

transform : translate() rotate() scale() ...

注意事项:

1. 其顺序会影响转换的效果 (先旋转会改变座标轴方向)
2. 当我们有位移和其他属性的时候，记得要将位移放在最前

2D转换简写