本文介绍了“CSS3的变形技术有哪些”的相关知识。很多人在实际案例操作中都会遇到这样的困难。接下来，让边肖带领大家学习如何应对这些情况！希望大家认真阅读，学点东西！
CSS3变形是指利用变换属性对元素进行旋转、扭曲、缩放、移位、矩阵、原点等类型的变形处理；元素的变形操作需要使用rotate()、skew()、scale()、translate()、matrix()等函数来实现。
本教程操作环境：windows7系统，CSS3HTML5第5版，戴尔G3电脑。
什么是css3变形
在CSS3中，变换函数可以实现文字或图像的旋转、扭曲、缩放、位移、矩阵、原点等六种变形处理。下面将详细解释变换的使用。
变形--旋转 rotate()
div . box { transform : rotate(45度)；}/*顺时针旋转45度*/变形--扭曲 skew()
div . box { transform : skew(45度)；}
/*通过skew()函数将矩形变成平行四边形。*/Skew()有三种情况：
1.歪斜(X，Y)使元素同时在水平和垂直方向扭曲(X轴和Y轴同时扭曲一定角度值)；
2.skewX(x)仅在水平方向扭曲元素(X轴扭曲)；
3.扭曲(Y)仅扭曲垂直方向的元素(Y轴扭曲)变形--缩放 scale().
div . box { transform : scale(1.5，0.5)；}缩放比例有三种情况：
1.缩放(X，Y)可以同时缩放元素的水平和垂直方向(即X轴和Y轴同时缩放)。
2.scaleX(x)元素仅水平缩放(x轴缩放)
3.缩放(Y)元素仅在垂直方向上缩放(Y轴缩放)
scale()的默认值是1。当该值设置为0.01到0.99之间的任何值时，元素将收缩。任何大于或等于1.01的值都用于放大元素。
变形--位移 translate()
div . box { transform : translate(50px，100px)；}
/*使用translate()函数将元素50px、X移动到Y轴下方，将元素100px移动到X轴右侧。*/翻译我们分为三种情况：
1.平移(x，y)同时水平和垂直移动(即x轴和y轴同时移动)
2.平移(x)仅在水平方向移动(x轴移动)
3.平移仅在垂直方向上移动(Y轴移动)
变形--矩阵 matrix ()
div.box{transform:matrix(1，0，0，1，100，100)；}/*
matrix()的六个属性的含义：第一个宽度比1是原始大小，
二是上下倾斜。1是2倍，2是3倍，0是没有倾斜。
第三个是左右倾斜，数字和第二个意思一样。
第四个是身高比1，是原来的尺寸。
第五个是X方向的像素位移，左右。
第六个是Y方向的像素位移，X方向是上下。
*/变形--原点 transform-origin
div . box { transform-origin : leftop；变压器：旋转(45度)；}将元素的原点更改为左上角，然后顺时针旋转45度。
这里介绍“CSS3的变形技术有哪些”的内容。感谢阅读。如果你想了解更多的行业，可以关注网站。边肖将为您输出更多高质量的实用文章！
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/147012.html