H5元素形变

2024-02-25 20:52

文章标签 元素 h5 形变

本文主要是介绍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>