css3之Transform

2016-10-26  本文已影响19人  Mescal川

要说css3最受大家欢迎的新功能,无外乎动画、变形、媒体查询和弹性布局。今天来说说css3的变形—transform。

属性

rotate:旋转

单位:deg(度)

transform:rotate(20deg);//顺时针旋转20度
transform:rotate(-20deg);//逆时针旋转20度

skew:扭曲

单位:deg(度)

transform:skew(20deg,20deg);//水平和垂直都扭曲20deg(如果度数相同也可以只写一个参数)
transform:skewX(20deg);//水平扭曲20度
transform:skewY(20deg);//垂直扭曲20度

scale:缩放

transform:scale(1.5,2);//水平扩大1.5倍,垂直扩大2倍

translate:位移

单位:百分比、px

transform:translate(10%,10%);//水平和垂直平移自身宽和高的10%

使用translate实现宽高不固定的水平垂直居中

div{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%.-50%);
}

transform-origin:改变变形的原点

单位:百分比、px
位移、缩放、扭曲、旋转默认是以本身的中心作为原点的,通过transform-origin可以改变原点。

transform-origin:0% 0%;//以左上角作为原点
transform-origin:0% 100%;//以右上角作为原点

transform为了兼容各浏览器要写相应的hack

-webkit-transform
-moz-transform
-ms-transform
-o-transform
transform

上一篇下一篇

猜你喜欢

热点阅读