跟着pink老师前端入门教程-day16

二十七、CSS3进阶

1、CSS3 2D转换

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果

转换（transform）可以简单理解为变形

移动：translate；旋转：rotate；缩放：scale

1.1 二维坐标系

2D转换是改变标签在二维平面上的位置和形状的一种技术

1.2 2D 转换之移动 translate

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

语法：

transform: translate(x,y); 或者分开写

transform: translateX(n);

transform: translateY(n);

重点：

定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素

translate最大的优点：不会影响到其他元素的位置

    <style>
        /* 移动盒子的位置：定位、盒子的外边距、2d转换移动 */
        div {
            width: 200px;
            height: 200px;
            background-color: saddlebrown;
            /* 1、 transform: translate(x,y); x就是x轴上移动位置，y就是y轴上移动位置，中间用逗号分割 */
            /* transform: translate(100px, 100px); */
            /* 2、只移动x坐标 */
            /* transform: translate(100px, 0); */
            /* transform: translateX(100px); */
            /* 3、只移动y坐标 */
            /* transform: translate(0，100px); */
            /* transform: translateY(100px); */
        }

        /* div:first-child {
            transform: translate(100px, 100px);
        } */

        div:last-child {
            background-color: salmon;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

translate中的百分比单位是相对于自身元素的 translate:(50%,50%);

对行内标签没有效果

    <style>
        .three {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: sandybrown;
        }

        p {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: aqua;
            /* margin-top: -100px;
            margin-left: -100px; */
            /* translate(-50%, -50%) 盒子往上走自己高度的一半 */
            transform: translate(-50%, -50%);
        }

        span {
            /* translate 对于行内元素是无效的 */
            transform: translate(300px, 300px);
        }
    </style>
</head>

<body>
    <div class="three">
        <p></p>
    </div>
    <span>123</span>
</body>

1.3 2D转换值旋转rotate

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

语法：transform:rotate(度数)

重点：

rotate里面跟度数，单位是 deg 比如 rotate(45deg)

角度为正时，顺时针，负时，为逆时针

默认旋转的中心点是元素的中心点

    <style>
        img {
            width: 150px;
            /* rotate(45deg) 顺时针45度 */
            transform: rotate(45deg);
            border-radius: 50%;
            border: 5px solid palegreen;
            /* 过渡写到本身上，谁做动画给谁加 */
            transition: all 1.0s;
        }

        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <img src="img/oldman.jpg" alt="">
</body>

1.4 2D转换中心点transform-origin

语法：transform-origin: x y;

重点：

注意后面的参数 x 和 y 用空格隔开

x y 默认转换的中心点是元素的中心点 (50% 50%)

还可以给x y 设置像素或者方位名词（top bottom left right center）

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: darkblue;
            margin: 100px auto;
            transition: all 0.1s;
            /* 1.可以跟方位名词 */
            transform-origin: left bottom;
            /* 2. 默认的是50% 50% 等价于center center*/
            /* 3. 可以是px，px */
        }

        div:hover {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

1.5 2D 转换之缩放scale

缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制他放大还是缩小

语法：transform:scale(x,y);

注意：

注意其中的x和y用逗号分隔

transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大

transform:scale(2,2) ：宽和高都放大了2倍

transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)

transform:scale(0.5,0.5)：缩小

sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: salmon;
            margin: 100px auto;
            /* transform-origin: left bottom; */
        }

        div:hover {
            /* 1. 里面写的数字不跟单位，就是倍数的意思 1就是1倍 2就是2倍 */
            /* transform：scale(x,y) */
            /* transform: scale(2, 2); */
            /* 2、修改了宽度为原来的2倍 高度不变 */
            /* transform: scale(2, 1); */
            /* 3、等比例缩放 同时修改宽度和高度， */
            /* transform: scale(2); */
            /* 4、小于1就是缩放 */
            transform: scale(0.2);
            /* scale 的优势之处:可以设置转换中心点缩放 */
            transform: scale(2);

        }
    </style>
</head>

<body>
    <div></div>
</body>

1 .6 2D 转换综合写法

注意：

1. 同时使用多个转换，其格式为：transform: translate() rotate() scale() ...等，

2. 其顺序会影转换的效果。（先旋转会改变坐标轴方向）

3. 当我们同时有位移和其他属性的时候，记得要将位移放到最前

    <title>2D 转换综合写法</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: saddlebrown;
            transition: all .5s;
        }

        /* 用空格隔开 */
        div:hover {
            /* transform: translate(150px, 50px) rotate(45deg); */
            /* 同时有位移和其他属性，需要把位移放到最前面 */
            transform: translate(150px, 50px) rotate(180deg) scale(1.2);
        }
    </style>
</head>

<body>
    <div></div>
</body>