码迷,mamicode.com
首页 > 移动开发 > 详细

css3 新特性(translate 移动,rotate 旋转 , scale 缩放)

时间:2019-10-27 18:29:30      阅读:104      评论:0      收藏:0      [点我收藏+]

标签:缩放   css3   属性   元素   单位   enter   -o   语法   而且   

1.transform(转换)可以实现元素的位移,旋转,缩放等效果(可以简单理解为变形)

 移动:translate            旋转:rotate          缩放:scale

2. 2D 转换之移动 translate

 可以改变元素在页面中的位置,类似定位。

 语法:

  transform:translate(x,y);  或者分开写

  transform:translateX( n );

  transform:translateY( n );

 重点:

  定义 2D 转换中的移动,沿着 X 和 Y 轴移动元素

  translate 最大的优点:不会影响到其他元素的位置  

  translate 中的百分比单位是相对自身元素的translate:(50%,50%);

  对行内标签没有效果

3. 2D 转换之旋转 rotate

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

 语法:

  transform:rotate(度数) 

 重点:

  rotate 里面跟度数,单位是 deg 比如 rotate(45deg)

  角度为正时,顺时针,负时,为逆时针

  默认旋转的中心点是元素的中心点

4. 2D转换中心点 transform-origin

 可以设置元素转换的中心点

 语法:

  transform-origin:x   y;

 重点:

  注意后面的参数 x 和 y 用空格隔开

  x  y 默认转换的中心点是元素的中心点 (50%   50%)

  还可以给 x y 设置 像素 或者 方位名词(top   bottom  left  right  center)

5. 2D 转换之缩放 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 新特性(translate 移动,rotate 旋转 , scale 缩放)

标签:缩放   css3   属性   元素   单位   enter   -o   语法   而且   

原文地址:https://www.cnblogs.com/qtbb/p/11748190.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!