transform---变形

css3的属性总是很多。。常用的和动画相关的这几个需要记住,记录一下加强记忆

transform---变形

 .transform{
  -moz-transform: rotate | scale | skew | translate ;

  -webkit-transform: rotate | scale | skew | translate ;
  -o-transform: rotate | scale | skew | translate ;
  -ms-transform: rotate | scale | skew | translate ;
  transform: rotate | scale | skew | translate ;
  }

变形有旋转(rotate) 缩放(scale) 扭曲(skew) 位移(translate)这几种, 这些变化需要一个中心点作为几点,默认是元素的中心点,可以通过transform-origin属性来指定中心点语法如下


 
  -moz-transform-origin: x y;
  -webkit-transform-origin: x y;
  -o-transform-origin: x y ;
  -ms-transform-origin: x y;
  transform-origin: x y ;

rotate(旋转)

deg是旋转的角度

 
 -moz-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);

缩放(scale)

scale有两个值,X Y

 
  -moz-transform: scale(0.8,0.8);
   -webkit-transform: scale(0.8,0.8);
   -o-transform: scale(0.8,0.8);
   -ms-transform: scale(0.8,0.8);
   transform: scale(0.8,0.8);
//只修改某一个值语法如下
//修改X
 -moz-transform: scaleX(0.8);
    -webkit-transform: scaleX(0.8);
    -o-transform: scaleX(0.8);
    -ms-transform: scaleX(0.8);
    transform: scaleX(0.8); 
	//修改Y
 -moz-transform: scaleY(1.2);
     -webkit-transform: scaleY(1.2);
     -o-transform: scaleY(1.2);
     -ms-transform: scaleY(1.2);
     transform: scaleY(1.2);

扭曲(skew)

skew有两个值,X Y,不过它的单位是deg

 
   -moz-transform: skew(45deg,15deg);
     -webkit-transform: skew(45deg,15deg);
     -o-transform: skew(45deg,15deg);
     -ms-transform: skew(45deg,15deg);
     transform: skew(45deg,15deg);     
//只修改某一个值语法如下
//修改X
 -moz-transform: scaleX(0.8);
    -moz-transform: skewX(-30deg);
    -webkit-transform: skewX(-30deg);
    -o-transform: skewX(-30deg);
    -ms-transform: skewX(-30deg);
    transform: skewX(-30deg); 
	//修改Y
 -moz-transform: scaleY(1.2);
     -moz-transform: skewY(30deg);
    -webkit-transform: skewY(30deg);
    -o-transform: skewY(30deg);
    -ms-transform: skewY(30deg);
    transform: skewY(30deg);

位移(translate)

translate有两个值,X Y,translate的单位比较正常就是px 百分比等单位,语法如下

 
   -moz-transform: translate(-10px,-10px);
     -webkit-transform: translate(-10px,-10px);
     -o-transform: translate(-10px,-10px);
     -ms-transform: translate(-10px, -10px);
     transform: translate(-10px,-10px);    
//只修改某一个值语法如下
//修改X
  -moz-transform: translateX(-10px);
    -webkit-transform: translateX(-10px);
    -o-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);     
	//修改Y
 -moz-transform: translateY(-10px);
     -webkit-transform: translateY(-10px);
     -o-transform: translateY(-10px);
     -ms-transform: translateY(-10px);
     transform: translateY(-10px);
本文标题:transform---变形
本文链接:https://56way.com/p/42.html
作者授权:除特别说明外,本文由 无路 原创编译并授权 小无路 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。