css3有趣的transform形变

Python微信订餐小程序课程视频

https://edu.csdn.net/course/detail/36074

Python实战量化交易理财系统

https://edu.csdn.net/course/detail/35475
在CSS3中，transform属性应用于元素的2D或3D转换，可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的形变处理

语法：

div{
 transform: none|transform-functions;
}

transform属性可以指定为关键字值none 或一个或多个值

注意：当transform有多个属性值时要用**空格**隔开

属性值：

值	描述
translate(x,y)	沿着 X 和 Y 轴移动元素。
translateX(n)	沿着 X 轴移动元素。
translateY(n)	沿着 Y 轴移动元素。
scale(x,y)	缩放转换，改变元素的宽度和高度。
scaleX(n)	缩放转换，改变元素的宽度。
scaleY(n)	缩放转换，改变元素的高度。
rotate(angle)	旋转，在参数中规定角度。
rotateX()	围绕 X 轴旋转
rotateY()	围绕 Y 轴旋转
skew(x-angle,y-angle)	倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	倾斜转换，沿着 X 轴。
skewY(angle)	倾斜转换，沿着 Y 轴。

下面对这些属性值进行一一讲解：

一、rotate（旋转）

**rotate(angle)**通过指定的角度参数对原元素指定一个2D旋转，angle代表旋转角度：正值表示顺时针旋转、负值表示逆时针旋转

单位：deg(角度)、rad(弧度)、grad(梯度)、turn(圈)

转换：弧度 = 角度*π/180

<div class="box">div>

.box{
 width: 200px;
 height: 200px;
 background-color: #B39DDB;
 transition: .2s; /* 过渡属性 */
}
.box:hover{
 transform: rotate(30deg); /* 顺时针旋转30度 */
}

这里用了下 css3中transition 过渡属性，不然在形变时会很生硬

效果如下：

而rotateX和rotateY 是围绕X轴和Y轴旋转的，上面这个案例可以看做是围绕Z轴旋转，大家可以脑构一下三