CSS中transform的使用

简介: CSS中transform的使用

简介:

转换是css3中的一个特征,可以实现元素的缩放,位移,变形。

作用

使元素在位置或者形状上发生一定的改变。

属性值

  • scale:缩放(一般)
  • translate 位移(重点)
  • rotate 旋转(重点)
  • skew 倾斜(了解)

缩放

格式:  transform:scale(x,y)
x:表示水平方向上的缩放倍数
y:表示垂直方向上的缩放倍数
 如果只写一个值表示等比例缩放。
【注意】 
 1.缩放只是一种视觉效果,不会对别的盒子造成影响。
 2.取值大于1表示放大,小于1表示缩小。

位移translate

格式:

transform:translate(水平位移量,垂直位移量)

取值:水平位移量为正,向右移动,垂直方向的正方形为下。
      只写一个值,表示水平位移量。
      参数为百分比的话,是相对于自身的宽高。
      位移只是一种视觉效果,不会对别的盒子造成影响

旋转:rotate

格式:transform:rotate(角度(deg))
 单位:deg,正值:顺时针,负值:逆时针。

倾斜:skew

格式:
 transform:skew(水平倾斜角度,垂直倾斜角度)
  单位:deg  正值:顺指针 负值:逆时针
  两个角度相交,不要大于等于90deg.
【注意点】
1.转换操作不会影响到其他元素
2.只能添加给块元素,不能添加给行内元素。
3.同时添加多个变形操作,先执行前面的,再执行后面的。
4.多个变形操作必须写在一个transform属性后面,书写多次transform属性时,
后面的会层叠掉前面的。

书写多个2D转换事项

1、transform 可以书写多个转换,中间用空格隔开。

2、书写顺序的不同,可能会出现不同的结果。

3、如果旋转和位移一起书写,旋转在前,位移在后表示先旋转,再按照旋转后的方向进行位移。

4、 如果位移在前, 旋转在后,表示先位移再按照原点进行旋转。


相关文章
CSS3 transform 文字切斜展开动画
CSS3 transform 文字切斜展开动画
79 0
CSS3 transform 立体导航栏
CSS3 transform 立体导航栏
53 0
|
3月前
|
前端开发 JavaScript
|
3月前
|
前端开发
CSS动画变形宝典:Transform属性,打造动态视觉盛宴!
CSS动画变形宝典:Transform属性,打造动态视觉盛宴!
|
6月前
|
JavaScript 前端开发
CSS3 transform 字体模糊问题
CSS3 transform 字体模糊问题
126 0
CSS3 transform: translateX || translateY || translateZ
CSS3 transform: translateX || translateY || translateZ
38 0
CSS3 transform 音乐盒子开盖效果
CSS3 transform 音乐盒子开盖效果
52 0
|
前端开发
CSS transform实现按钮边框旋转效果
CSS transform实现按钮边框旋转效果
129 1
|
前端开发
css提示文字上下左右居中-transform加absolute
css提示文字上下左右居中-transform加absolute