关于CSS3元素2D平面变换属性transform的实现方法

黄舟
发布: 2017-05-21 15:44:47
原创
1660 人浏览过

CSS3的形状变换允许我们对元素拉伸、缩放等等

这篇我主要谈下一2D平面变换
属性transform可以进行变换
transform就是变形的意思
并且它主要通过函数来使用,有以下函数

  • translate() 平移变换

  • ratate() 旋转变换

  • scale() 缩放变换

  • skew() 倾斜变换

  • matrix() 矩阵变换

transform-origin则时定义变换的中心

平移变换translate

translate()两个参数,第一个是x轴相对位移,第二个参数是y轴相对位移

.demo { ...... transform: translate(100px, 200px); <-- }
登录后复制

或者translate()可以拆成translateX()和translateY()
(小写形式translatex/y也可以)

.demo { ...... transform: translateX(100px) translateY(200px); /*改*/}
登录后复制

两者是等价的,不过很麻烦
结果是元素向右平移了100px,向下平移了200px

旋转变换rotate

rotate()一个参数,表示旋转角度的‘xxdeg’,
正数顺时针旋转,允许负值

.demo { ...... transform: rotate(30deg);}
登录后复制

结果是元素顺势针旋转了30°
不过元素默认的旋转中心是元素中心
修改变换中心可以用我们的transform-origin属性
比如说我们想要让元素沿着左上顶点旋转

.demo { ...... transform: rotate(30deg); transform-origin: 0 0; /*增*/}
登录后复制

transform-origin的三个参数是 x轴距离(x-axis),y轴距离(y-axis),z轴距离(z-axis)
默认的形式就是transform-origin: 50% 50% 0;
x-axis可选值除了长度和百分比,还有left、center、right
y-axis可选值除了长度和百分比,还有top、center、bottom
z-axis可选值只有长度值,在2D变换中我们暂时用不到它

缩放变换scale

缩放元素就是改变元素的尺寸
两个参数,宽度与高度缩放的倍率(无单位)
同样可以拆成scaleX()与scaleY()

.demo { ...... transform: scale(2,2);}
登录后复制

这样就是把元素宽度扩大一倍,高度扩大二倍
注意这是真正意义的缩放
意思就是,如果你的元素中有文字会产生拉伸的效果
等价形式如下

.demo { ...... transform: scaleX(2) scaleY(3); /*改*/}
登录后复制

可以通过transform-origin修改变换中心

倾斜变换skew

skew就是倾斜扭曲的意思
这个函数会让你的元素线性扭曲
两个参数,x轴与y轴的扭曲角度,同样是xxdeg的形式

.demo { ...... transform: skew(10deg,20deg);}
登录后复制

等价

.demo { ...... transform: skewX(10deg) skewY(20deg); /*改*/}
登录后复制

同样可以通过transform-origin修改变换中心,不再赘述

矩阵变换matrix

听起来超级NB,实际上呢
真的是超级NB
矩阵变换用的比较少,它是上面所有变换的基础
我懂得也不是很深
作为一个数学系的学生,确实惭愧T^T
matrix变换有6个参数,可以控制元素的旋转、平移、倾斜和缩放
比如下面的代码把元素旋转了30°,x、y轴各平移20px

.demo { ...... transform: matrix(0.866,0.5,-0.5,0.866,20,20);}
登录后复制

如果对数学有兴趣的同学,我推荐张鑫旭大神的文章传送门
没准以后我心血来潮也写一篇矩阵的文章……


今天要讲的东西比较简单就不放图了
3D变换相关属性 –>传送门

以上是关于CSS3元素2D平面变换属性transform的实现方法的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!