CSS3变形是什么

CSS3变形指的是利用transform属性对元素进行旋转、扭曲、缩放、位移、矩阵、原点等类型的变形处理；元素的变形操作需要配合使用rotate()、skew()、scale()、translate()、matrix()等函数来实现。
南湖网站建设公司创新互联建站,南湖网站设计制作，有大型网站制作公司丰富经验。已为南湖上千提供企业网站建设服务。企业网站搭建\外贸营销网站建设要多少钱，请找那个售后服务好的南湖做网站的公司定做！

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

什么是css3变形

在CSS3中，可以利用transform功能来实现文字或图像的旋转、扭曲、缩放、位移、矩阵、原点这六种类型的变形处理，下面将详细讲解transform的使用。

变形--旋转 rotate()

div.box{transform: rotate(45deg);} /*顺时针旋转45度*/

变形--扭曲 skew()

div.box{transform:skew(45deg);} /*通过skew（）函数将长方形变成平行四边形。*/

Skew()具有三种情况：

1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；

2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；

3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）变形--缩放 scale()

div.box{transform: scale(1.5,0.5);}

缩放 scale 具有三种情况：

1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）

2、scaleX(x)元素仅水平方向缩放（X轴缩放）

3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）

scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。

变形--位移 translate()

div.box{transform: translate(50px,100px);} /* 通过translate()函数将元素向Y轴下方移动50px,X轴右方移动100px。 */

translate我们分为三种情况：

1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）

2、translateX(x)仅水平方向移动（X轴移动）

3、translateY(Y)仅垂直方向移动（Y轴移动）

变形--矩阵 matrix ()

div.box{transform: matrix(1,0,0,1,100,100);} /* matrix() 6个属性的意思的：第一个宽度比例1就是原大小，第二个是上下倾斜1就是2倍，2就是3倍，0就是不倾斜第三个是左右倾斜，数字和第二个一样的意思，第四个是高度比例1就是原大小，第五个是X方向的像素位移，X方向就是左右，第六个是Y方向的像素位移，X方向就是上下*/

变形--原点 transform-origin

div.box{transform-origin: left top;transform: rotate(45deg); }

改变元素原点到左上角，然后进行顺时旋转45度。

（学习视频分享：css视频教程）

网页题目：CSS3变形是什么
文章转载：http://lszwz.com/article/cpcije.html

其他资讯

售后响应及时

7×24小时客服热线

数据备份

更安全、更高效、更稳定

价格公道精准

项目经理精准报价不弄虚作假

合作无风险

重合同讲信誉，无效全额退款

乐山小谭建站工作室是一家专注从事于高品质视觉体验及互联网设计开发，乐山网站建设，乐山网站设计，乐山网页设计，乐山网站制作，品牌网站建设，营销网站建设，集团网站建设，企业网站建设，外贸网站建设，响应式网站建设，小程序开发，微信开发，企业形象设计，企业宣传视频等服务，小谭建站位于乐山市龙岗区大运软件小镇，小谭建站拥有经验丰富的高级网站建设工程师和一流的网页高端设计人员，具备各种规模与类型网站建设的雄厚实力，在网站建设领域树立了自己独特的设计风格。

友情链接交换友情链接

德阳网站建设商城网站中国电信西部信息中心机房网站排名成都网站制作西云服务器托管成都网站推广服务器托管成都h5网站建设梓潼网站制作公司

Copyright © 2022 青羊区小谭信息技术咨询服务工作室乐山建站工作室 All Rights Reserved 蜀ICP备2021004003号-25

Copyright © 2022 青羊区小谭信息技术咨询服务工作室乐山建站工作室

蜀ICP备2021004003号-25