本文主要是介绍H5元素形变，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
H5元素形变
一、缩放
语法：
transform:scale(缩放倍率) //整体缩放
transform:scale(水平缩放倍率，垂直缩放倍率) //单独设置水平和垂直方向的缩放
transform: scaleX(缩放倍率) //沿X轴缩放
transform: scaleY(缩放倍率) //沿Y轴缩放
transform: scaleZ(缩放倍率) //沿Z轴缩放
transform: scaleX(缩放倍率) scaleY(缩放倍率) scaleZ(缩放倍率) //单独设置XYZ轴的缩放
二、倾斜
语法：
transform: skew(水平倾斜角度deg) //水平方向倾斜
transform: skew(水平倾斜角度deg，垂直倾斜角度deg) //单独设置水平和垂直方向倾斜
transform: skewX(倾斜角度deg) //沿X轴倾斜
transform: skewY(倾斜角度deg) //沿Y轴倾斜
transform: skewZ(倾斜角度deg) //沿Z轴倾斜
transform: skewX(倾斜角度deg) skewY(倾斜角度deg) skewZ(倾斜角度deg) //单独设置XYZ轴的倾斜
三、移动
语法
transform: translate(水平方向移动距离px); //水平方向移动
transform: translate(水平方向移动距离px 垂直方向移动距离px); //垂直方向移动
transform: translateX(移动距离px); //沿X轴移动
transform: translateY(移动距离px); //沿Y轴移动
transform: translateZ(移动距离px); //沿Z轴移动
transform: translateX(移动距离px) translateY(移动距离px）translateZ(移动距离px); //单独设置XYZ轴移动
四、旋转
语法：
transform: rotateX(角度deg) //沿X轴旋转
transform: rotateY(角度deg) //沿Y轴旋转
transform: rotateZ(角度deg) //沿Z轴旋转
transform: rotateX(角度deg) rotateY(角度deg) rotateZ(角度deg) //上面三种方法的连写
transform: rotate3d(x轴权重，Y轴权重，Z轴轻重，总角度) //沿XYZ轴旋转,前三个参数为角度分配比例，最后一个参数为总的旋转度数
示例：
<style>*{margin: 0;padding: 0;}body{display: flex;flex-direction: row;flex-wrap: wrap;}div{margin: 10px;width: 250px;height: 360px;background-color: yellow;position: relative;border: 1px solid black;}img{width: 200px;position: absolute;left:25px;top:25px}p{position: absolute;width: 250px; bottom: 0px;font-size: 15px;text-align: center;}.A1{opacity: 0.4;}/* 放大0.8倍 */#scale1{transform: scale(0.8);}/* 水平方向放大1.1倍，垂直方向放大0.5 */#scale2{transform: scale(1.1,0.5);}/* 沿X轴放大0.8倍 */#scale3{transform: scaleX(0.8);}/* 沿Y轴放大0.8倍 */#scale4{transform: scaleY(0.8);}/* 沿Z轴放大0.8倍 */#scale5{transform: scaleZ(0.8);}/* 沿XYZ轴放大0.8倍*/#scale6{transform: scaleX(0.8) scaleY(0.8) scaleZ(0.8);}/* 水平方向倾斜15度 */ #skew1{transform: skew(15deg);}/* 垂直方向倾斜15度 */#skew2{transform: skew(0,15deg);}/* 水平和垂直方向倾斜15度 */#skew3{transform: skew(15deg,15deg);}/* 沿X轴倾斜15度 */#skew4{transform: skewX(15deg);}/* 沿Y轴倾斜15度 */ #skew5{transform: skewY(15deg);}/* 沿XY轴倾斜15度 */#skew6{transform: skewX(15deg) skewY(15deg);}/* 水平方向移动15px */#translate1{transform: translate(15px);}/* 垂直方向移动15px */#translate2{transform: translate(15px,15px);}/* 沿X轴移动15px */#translate3{transform: translateX(15px);}/* 沿Y轴移动15px */#translate4{transform: translateY(15px);}/* 沿Z轴移动15px */#translate5{transform: translateZ(15px);}/* 沿XYZ轴移动15px */#translate6{transform: translateX(15px) translateY(15px) translateZ(15px);}/*沿X轴旋转45度*/#rotate1{transform: rotateX(45deg);}/*沿X轴旋转45度*/#rotate2{transform: rotateY(45deg);}/*沿Z轴旋转45度*/#rotate3{transform: rotateZ(45deg);}/*沿XYZ轴旋转45度*/#rotate4{transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);}/*沿XYZ轴旋转15度,前三个参数为角度分配比例，最后一个参数为总的旋转度数*/#rotate5{transform: rotate3d(1,1,1,45deg); }</style>
效果:
这篇关于H5元素形变的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
