02-css3之2D转换

一、CSS3 —2D转换

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

1. 2D转换之移动translate

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

1.1语法

transform:translate(x,y);

1.2用法

 .box1 {

            background-color: #f34;

            /* 前面是x轴，后面是y轴，两者要用逗号隔开 */

            /* 1.translate移动不会影响其他元素的位子 */

            transform: translate(80px, 50px);

        }

        .box2 {

            background-color: #999;

            /* 如果只想移动某一个值，可以在translate后跟个坐标轴大写 */

            transform: translateX(52px);

            /* 写法二：y轴为0，不能省略 */

            transform: translate(52px, 0);

        }

        .box3 {

            background-color: #aee9a9;

            /* 2.translate里面的如果是百分号，那么移动的就是他自身宽的50%和高的50% */

            transform: translate(50%, 50%);

        }

利用translate配合定位使盒子垂直水平居中

        .box4 {

            position: relative;

            background-color: #faf634;

            transform: translate(100px, 100px);

        }

        /* 让box5在box4 中水平垂直居中 */

        .box5 {

            position: absolute;

            left: 50%;

            top: 50%;

            /* 此时盒子的上边垂直居中于父盒子，左边水平居中于父盒子，只需要向上和向左走自身宽度的一半即可垂直水平居中 */

            /* 由于x轴值越大就是向右，y轴值越大就是向下，所里向左和向上是负号 */

            transform: translate(-50%, -50%);

            width: 50px;

            height: 50px;

            background-color: green;

        }

translate对行内元素和行内块元素无效

        span {

            /* 3.translate对行内元素无效 */

            transform: translate(10px, 20px);

        }

        input {

            /* 4.translate对行内块元素也无效 */

            transform: translate(100px 50px);

        }

        img {

            transform: translate(100px 50px);

        }

1.3百分比情况下与定位中方向值的区别

translate值为百分比时，x是自身宽的百分比，y是自身高的百分比。

相对定位中的left/right的值为百分比时，是根据离他最近的有定位的父元素的宽的百分比，top/bottom则是高。

1.4总结

1.移动的盒子不会影响到其他元素的位置。

2.translate中的百分比是自身元素宽高的百分比。

3.对行内元素和行内块元素没有效果。

2. 2D转换之旋转—rotate

让元素在二维平面内顺时针或逆时针旋转。

2.1语法

transform:rotate(度数);

2.2用法

 .box1 {

            background-color: #f34;

            /* 后面一定要带单位deg，就是度 */

            transform: rotate(100deg);

        }

        .box2 {

            background-color: #999;

            /* 当度数是正直就是顺时针旋转，当度数是负值就是逆时针旋转 */

            transform: rotate(-100deg);

        }

        span {

            /* rotate对行内元素无效 */

            transform: rotate(60deg);

        }

        input {

            /* rotate对行内块元素有效 */

            transform: rotate(50deg);

        }

2.3总结

1.rotate里的值必须跟上单位deg。

2.当rotate里的值为正数，即为顺时针旋转，为负数就是逆时针旋转。

3.默认的旋转点是元素的中心点。

4.rotate对行内元素无效，对行内块元素和块级元素有效。

2.4 案例

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>旋转三角</title>

    <style>

        div {

            position: relative;

            width: 250px;

            height: 35px;

            border: 1px solid #000;

        }

        div::after {

            content: "";

            position: absolute;

            right: 10px;

            top: 10px;

            width: 10px;

            height: 10px;

            /* 给右边框和下边框 */

            border-right: 1px solid #000;

            border-bottom: 1px solid #000;

            /* 让盒子顺时针旋转45度 */

            transform: rotate(45deg);

        }

        /* 鼠标经过div时，里面的小三角翻转180度 */

        div:hover::after {

            /* 要想三角翻转180度，要先加上三角本身的45度 */

            transform: rotate(225deg);

            border-color: orange;

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

3.2D转换中心点—transform-origin

可以设置元素转换的中心点

3.1语法

transform-origin:(x y);

3.2用法

.box1 {

            background-color: #f34;

            /* 默认是50% 50%，即center center，就是元素的中心点 */

            transform-origin: 50% 50%;

        }

        .box2 {

            background-color: #999;

            /* 方位名词，即为左下角 */

            /* transform-origin: left bottom; */

            /* 都是方位名词时可以颠倒顺序 */

            transform-origin: bottom left;

        }

        .box3 {

            background-color: #aee9a9;

            /* 可以跟精确的像素值，不能颠倒顺序,x必须在前，y必须在后 */

            transform-origin: 20px 30px;

        }

        .box4 {

            background-color: #faf634;

            /* 可以混搭,不能颠倒顺序，前面永远是x轴 */

            transform-origin: 20px center;

        }

3.3 总结

1.中心点的值用空格隔开。

2.中心点的值可以是方位名词，像素，也可以混搭，和background-position用法一致。

3.4 案例

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        li {

            /* 最后，溢出隐藏 */

            overflow: hidden;

            float: left;

            width: 200px;

            height: 200px;

            border: 1px solid red;

            list-style: none;

            /* 清除相邻li边框粗线 */

            margin-left: -1px;

        }

        li:after {

            display: block;

            content: "小艾";

            width: 100%;

            height: 200px;

            line-height: 200px;

            text-align: center;

            background-color: skyblue;

            /* 先让它旋转出父盒子 */

            transform: rotate(90deg);

            /* 中心点是center时，怎么转都出不来，此时需要让盒子沿着左下角旋转 */

            transform-origin: left bottom;

            transition: all .5s;

        }

        li:hover::after {

            /* 鼠标经过li时，after复原，即0度 */

            transform: rotate(0deg);

        }

    </style>

</head>

<body>

    <ul>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

</body>

</html>

4.2D转换之缩放-scale

可以使元素放大或缩小。

3.1语法

transform:scale(x,y)

3.2用法

        	.box1:hover {

            /* 以前的放大是通过调整宽高 */

            /* 缺点：1.会影响下面的盒子；2.宽度向两边延伸，高度向下延伸，且不可改变 */

            width: 200px;

            height: 200px;

        }

        	.box2:hover {

            /* 默认值就是1，即为1倍 */

            transform: scale(1, 1);

        }

                .box3:hover {

            /* 前面的值为宽，后面的值为高，即宽度放大2倍，高度不变 */

            transform: scale(2, 1);

        }

                .box4:hover {

            /* 不会影响下面的盒子，宽高都是由中心点向四面八方延伸 */

            /* 两个值相同的时候可以省略 */

            transform: scale(2);

        }

                .box5:hover {

            /* 当scale值小于1时，即为缩小 */

            /* 缩小也是向中心点缩小 */

            transform: scale(0.5);

        }

        .box6 {

            background-color: skyblue;

            transform-origin: left bottom;

        }

        .box6:hover {

            /* 沿着中心点放大2倍 */

            transform: scale(2);

        }

        .box7 {

            background-color: skyblue;

            transform-origin: 10px 50px;

        }

        .box7:hover {

            /* 沿着中心点缩小一半 */

            transform: scale(0.5);

        }

3.3 总结

1.scale值之间用","隔开

2.scale值默认为(1,1)，即是原来的一倍，不变。

3.scale值大于1时候，就是沿着中心点放大；scale值小于1时候，就是朝着中心点缩小。

4.scale中只写一个值，省略的值默认与写的值相等。

5.scale缩放与设置宽高缩放的区别在于，scal不会影响其他盒子，且缩放的中心点可以改变。

5.2D转换之斜切 - skew

5.1语法

transform:scale(x,y)

5.2用法

        .box1 {

            /* X正值，那么x轴不动，y轴逆时针斜切30deg */

            transform: skewX(30deg);

        }

        .box2 {

            /* X负值，那么x轴不动，y轴顺时针斜切30deg */

            transform: skewX(-30deg);

        }

        .box3 {

            /* Y正值，那么y轴不动，x轴逆时针斜切30deg */

            transform: skewY(30deg);

        }

        .box4 {

            /* Y负值，那么y轴不动，x轴顺时针斜切30deg */

            transform: skewY(-30deg);

        }

        .box5 {

            /* 当xy的值加起来为90deg时,xy轴重合,盒子会斜成一条线 */

            transform: skew(38deg, 52deg);

        }

        .box6 {

            transition: all .5s;

        }

        .box6:hover {

            transform: skew(45deg, 45deg);

        }

5.3总结

1.斜切哪个轴，哪个轴就保持不动，另一个轴根据角度的正负进行倾斜。

2.斜切X轴时候，如果是正值，y轴就逆时针旋转对应度数，反之亦然。

3.斜切Y轴时候，如果是正值，x轴就逆时针旋转对应度数，反之亦然。

4.当xy轴度数相加为90deg或-90deg时候，此时xy轴重合，盒子会被隐藏。

5.4 案例

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .box {

            position: relative;

            width: 300px;

            height: 400px;

            margin: 100px auto;

            /* 溢出隐藏 */

            overflow: hidden;

            background-color: #0099ff;

        }

        .box::after {

            content: '';

            position: absolute;

            top: 0px;

            /* 将光柱移出去 */

            left: -150px;

            width: 20px;

            height: 450px;

            /* 光柱渐变 */

            background: linear-gradient(to right, #ffffff 0%, #eee 50%, #ffffff 100%);

            transform: skewX(-30deg);

        }

        .box:hover::after {

            left: 400px;

            /* 过渡加在hover上，只有开始的时候有过渡，回去的时候瞬间完成 */

            transition: left .6s;

        }

    </style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

6.2D转换之综合写法

6.1 语法

有位移先写位移，其他属性之间用空格隔开

transform:translate(x,y) rotate(deg) scale(x,y);

6.2 用法

        .box1:hover {

            /* 呈直线移动并自身旋转，先位移，再其他 */

            transform: translate(50px, 100px) rotate(45deg) scale(2);

        }

        .box2:hover {

            /* 呈螺旋状旋转移动，因为先旋转时，旋转后盒子坐标轴方向改变，再进行位移会走偏 */

            transform: rotate(45deg) translate(50px, 100px) scale(2);

        }

6.3总结

1.各属性之间用空格隔开。

2.顺序会影响到转换的效果(物体旋转时，内部坐标系也会一起发生旋转)。

3.当同时有位移或者其他属性的时候，要将位移放到最前面