主页

转换(tarnsform) 是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果
转换(transform)可以简单理解为变形
移动:translate
2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位

语法
transform: ranslate(x, y);
/* 分开写 */
transform: translateX(x);
transform: translateY(y);

重点
定义为2D转换中的移动,沿着X和Y轴移动元素
translate最大的优点:不会影响到其他元素的位置
translate中的百分比单位是相对自身元素的 translate(-50%, -50%),可以配合定位实现水平垂直居中
对行内标签没有效果

旋转:rotate
2D旋转指的是让元素在2维平面内顺时针或逆时针旋转

语法
transform: rotate(度数);

重点
rotate里面跟度数,单位是deg比如 rotate(45deg);
角度为正时,顺时针,负时,为逆时针
默认旋转点是中心点,是元素的中心点

旋转中心点transform-origin

语法
transform-origin: x y;

重点
注意后面的参数x和y用空格隔开
x y默认转换的中心点是元素的中心点(50% 50%)
还可以给x y设置像素或者方位名词(top bottom left right center)

缩放:scale
顾名思义,可以放大缩小,只要给元素添加上了这个属性就能控制它放大还是缩小

语法
transform: scale(x, y);

重点
注意其中x和y用逗号分隔,填数字不跟单位
transform: scale(1,1); 宽和高都放大一倍,相当于没有放大
transform: scale(2,2); 宽和高都放大2倍
transform: scale(2); 只写一个参数,第二个参数则和第一个参数一样,相当于 scale(2, 2)
transform: scale(0.5, 0.5); 缩小
scale缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子

CSS3

版权属于:Joe
作品采用:本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
0
查看目录

目录

来自 《CSS3-2D转换》
评论

博主很懒,啥都没有
46 文章数
7 评论量
3 分类数
49 页面数
已在风雨中度过 198天5小时50分