CSS3变形是什么

广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

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变形是什么的详细内容,更多请关注9543建站博客其它相关文章!

广告:SSL证书一年128.66元起,点击购买~~~

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。

作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:关于程序发布的10篇文章推荐
下一篇:HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能

发表评论

关闭广告
关闭广告