css transform的2D转换

导读：

●转换transform我们简单理解就是变形有2D和3D之分

●我们暂且学了三个分别是位移旋转和缩放

●2D移动translate(x, y)最大的优势是不影响其他盒子，里面参数用% ,是相对于自身宽度和高度来计算的

●可以分开写比如translateX(x)和translateY(y)

●2D旋转rotate(度数)可以实现旋转元素度数的单位是deg

●2D缩放sacle(x,y)里面参数是数字不跟单位可以是小数最大的优势不影响其他盒子

设置转换中心点transform-origin:xy;参数可以百分比、像素或者是方位名词

●当我们进行综合写法,同时有位移和其他属性的时候,记得要将位移放到最前

2D转换之translate

transform:translate(x,y);

x是指沿x轴移动，y是指沿y轴移动。

如果只想移动让其在x或y轴移动也可以使用translateX(),translateY();

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

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

3.translate中的百分比单位是相对于自身元素的大小而言的。

2D转换之旋转rotate

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

语法：transform:rotate(度数);

2.重点

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

●角度为正时,顺时针,负时,为逆时针

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

可结合过渡效果为元素添加旋转效果

<style>
        img {
             100px;
            transition: all 0.5s;
        }

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

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

4.4 2D转换中心点transform-origin
我们可以设置元素转换的中心点
1.语法
transform-origin: x y;
2.重点
● 注意后面的参数x和y用空格隔开
●xy默认转换的中心点是元素的中心点(50% 50%)
●还可以给xy设置像索或者方位名词( top bottom left right center )

旋转中心点案例

实现功能：鼠标经过时子盒子旋转至框中

<style>
        div {
            overflow: hidden;
             100px;
            height: 100px;
            margin: 100px auto;
            border: 1px solid #ccc;
        }

        div::after {
            content: '';
            display: block;
             100%;
            height: 100%;
            background-color: pink;
            transform-origin: left bottom;
            transform: rotate(180deg);
            transition: all 1s;
        }

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

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

2D转换之缩放scale
缩放,顾名思义,可以放大和缩小。只要给元素添加_ 上了这个属性就能控制它放大还是缩小。
1.语法
transform:scale(x,y) ;

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

scale相对于直接修改元素的宽度和高度值的优势：

直接修改元素的宽度元素会像两边扩展，直接修改元素的高度元素向下扩展

修改元素的宽度或高度后，该元素的变化会影响到其他的元素位置，而scale则不会有这个问题

<style>
        div {
            overflow: hidden;
             200px;
            height: 200px;
            transition: all .3s;
        }

        div img:hover {
            transform: scale(1.2);
        }
    </style>
</head>

<body>
    <div><a href=""><img src="user.jpg" alt=""></a></div>
</body>

2D转换综合写法
注意:
1.同时使用多个转换,其格式为: transform: translate() rotate( scale() ..等,
2.其顺序会影转换的效果。( 先旋转会改变坐标轴方向)
3.当我们同时有位移和其他属性的时候,记得要将位移放到最前面