前端Css3新特性之平面转换（2D）语法

本文链接：https://blog.csdn.net/weixin_48082900/article/details/127405037

什么是平面转换？

transform 改变盒子在平面内的形态（位移、旋转、缩放,倾斜等等）

一、位移（translate）

可以让盒子沿着x轴或者y轴来移动

1.语法

注意：移动的时候可以写百分比，如下写法移动的就是盒子自身的宽度的50%

transform: translateX(50%);

transform: translate(x, y);
transform: translateX(x);
transform: translateY(y);

Q:位移和外边距margin的区别？

margin移动盒子会影响其余的盒子，把其他人挤走

位移translate移动盒子不会影响其他的盒子，不脱标

2.开门案例

<style>

.box {

height: 600px;

width: 1366px;

background: url(./images/bg.jpg) no-repeat;

margin: 100px auto;

}

.box .left {

float: left;

height: 100%;

width: 50%;

background: url(./images/fm.jpg) no-repeat;

}

.box .right {

float: right;

height: 100%;

width: 50%;

background: url(./images/fm.jpg) no-repeat right 0px;

}

.box:hover .left {

transform: translateX(-100%);

transition: all 1s;

}

.box:hover .right {

transform: translateX(100%);

transition: all 1s;

}

</style>

</head>

<body>

<div class="box">

<div class="left"></div>

<div class="right"></div>

</div>

</body>

二、旋转（rotate）

旋转可以让盒子旋转角度

单位：deg(角度）、turn（圈)

1turn=360deg

1.语法

transform: rotate(45deg);

单位一定不能少！！！

如果是正度数，则是顺时针旋转

如果是负度数，则是逆时针旋转

2.旋转中心点

默认旋转中心点是图片自己的正中心（水平位置和垂直位置的中心）

改变旋转中心点的方法：

transform-origin: right bottom;

3.注意

若既有位移又有旋转，则先位移再旋转

transform: translate(900px) rotate(360deg);

三、缩放 scale

1.语法

第一种：

transform: scale(1.5)；

注意：直接写缩放的倍数，不带单位，等比例缩放不会变形

第二种：

transform: scale(x轴缩放倍数，y轴缩放倍数)；

也可以单独写宽高的缩放倍数，不好控制，容易变形（不推荐）

2.旋转加缩放综合案例如下：

<style>

.box {

position: relative;

height: 300px;

width: 450px;

margin: 100px auto;

overflow: hidden;

}

.box .play {

position: absolute;

top: 50%;

left: 50%;

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

transition: all 1s;

opacity: 0;

}

.box:hover .play{

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

opacity: 1;

}

</style>

<body>

<div class="box">

<img src="./images/11.jpg" alt="">

<img src="./images/play.png" alt="" class="play">

</div>

</body>

四、倾斜 skew （鸡肋，几乎不怎么用）

1.语法

transform: skew(70deg)；

倾斜的角度不超过90deg

正值右斜，负值左斜

<style>
.box {
width: 400px;
height: 400px;
background-color: pink;
margin: 100px auto;
/* 倾斜里面也是deg 往左倾斜是正值往右是负值尽量不要超过90deg,不然就看不到*/
transform: skew(-50deg);
}
</style>
</head>

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

若想继续了解3D，可以参考我的另一篇博客： https://mp.csdn.net/mp_blog/creation/editor/127406706