CSS3变形transform 2D初级了解-白红宇

CSS3变形transform 2D初级了解

阅读量：6275 次

发布时间：2019-06-22

本文共 4667 字，大约阅读时间需要 15 分钟。

<!doctype html>

<html>

<head>

<style>

*{margin:0;padding:0;}

.clearfix{zoom:1;}

.clearfix:after{content:'\20';display:block;height:0;clear:both;}

body{font-size:62.5%;padding:0;}

.con1,.con2,.con3,.con4{width:30px;height:30px;background:#f00;margin:60px auto 0;text-align:center;}

.con1:hover{

-webkit-transform:translate(50px,50px) scale(2) rotate(250deg);

-moz-transform:translate(50px,50px) scale(2) rotate(250deg);

-o-transform:translate(50px,50px) scale(2) rotate(250deg);

-ms-transform:translate(50px,50px) scale(2) rotate(250deg);

transform:translate(50px,50px) scale(2) rotate(250deg);

}

/*同一个变形函数中逗号隔开，多个不同变形函数空格隔开，注意写不同浏览器之间的兼容，通用放最下面*/

.con2:hover{-webkit-transform:skew(-50deg);}

　　/*倾斜大于90deg好像会有问题，可能没研究透*/

.con3:hover{-webkit-transform:translate(-50px,-50px) scale(.5) rotate(-250deg);}

/*位移X轴负值是向左，正值向右，Y轴负值是向上,正值向下。

缩放值在0-1之间为收缩，大于1为放大，

旋转正值顺时针旋转，负值逆时针旋转*/

.con4:hover{-webkit-transform:translate(50px, 50px) translate(-50px, -50px);}

/*多个位移之间会相叠加减*/

</style>

</head>

<body>

</div>

</div>

</div>

</div>

<p>2D变形有：translateX(),translateY(),scaleX(),scaleY(),skewX(),skewY(),rotate()</p>

<p>3D变形有：rotateX(),rotateY(),rotateZ(),rotate3d(),translateZ(),translate3d(),scaleZ(),scale3d(),</p>

</body>

</html>

2D transform常用的transform-function的功能:

translate()：用来移动元素，可以根据X轴和Ｙ轴坐标重新定位元素位置。在此基础上有两个扩展函数：translateX()和translateY()。

scale()：用来缩小或放大元素，可以使用元素尺寸发生变化。在此基础上有两个扩展函数：scaleX()和scaleY()。

rotate()：用来旋转元素。

skew()：用来让元素倾斜。在此基础上有两个扩展函数：skewX()和skewY()。

matrix()：定义矩阵变形，基于X轴和Y轴坐标重新定位元素位置。

3D transform常用的transform-function的功能:

translate3d()：移元素元素，用来指定一个3D变形移动位移量

translate()：指定3Ｄ位移在Ｚ轴的位移量。

scale3d()：用来缩放一个元素。

scaleZ():指定Z轴的缩放向量。

rotate3d()：指定元素具有一个三维旋转的角度。

rotateX()、rotateY()和rotateZ()：让元素具有一个旋转角度。

perspective()：指定一个透视投影矩阵。

matrix3d()：定义矩阵变形。

transform-origin属性

默认情况，变形的原点在元素的中心点，或者是元素X轴和Y轴的50%处，

如果我们把元素变换原点（transform-origin）设置0（x） 0（y），这个时候元素的变换原点转换到元素的左顶角处，

CSS3变形中旋转、缩放、倾斜都可以通过transform-origin属性重置元素的原点，但其中的位移translate()始终以元素中心点进行位移。

改变transform-origin属性的X轴和Ｙ轴的值就可以重置元素变形原点位置，其基本语法如下所示:

transform-origin：[
    
      | 
     
       | left | center | right | top | bottom] | [
      
        | 
       
         | left | center | right] | [[
        
          | 
         
           | left | center | right] && [
          
            | 
           
             | top | center | bottom]] 
            
              ?

可以拆分为

/*只设置一个值的语法*/transform-origin: x-offset /*一个值，百分比，em,px则定位X轴原点*/ transform-origin:offset-keyword /*一个值，left right center定位X轴，top bottom定位Y轴*/ /*设置两个值的语法*/ transform-origin：x-offset y-offset /*两个值，百分比，em,px则第一个数值定位X轴原点第二个数值定位Y轴原点*/ transform-origin：y-offset x-offset-keyword /*两个值，第二个值为left right center则 第一个百分比，em,px值定义Y轴原点*/ transform-origin:10px center中的10px定位的是X轴还是Y轴原点？ transform-origin：x-offset-keyword y-offset transform-origin：x-offset-keyword y-offset-keyword/*两个值，都为top left right bottom center，则 left right定义X轴原点，top bottom定义Y轴原点/ transform-origin：y-offset-keyword x-offset-keyword/*两个值，都为top left right bottom center，则 left right定义X轴原点，top bottom定义Y轴原点/ /*设置三个值的语法*/ transform-origin：x-offset y-offset z-offset transform-origin：y-offset x-offset-keyword z-offset transform-origin：x-offset-keyword y-offset z-offset transform-origin：x-offset-keyword y-offset-keyword z-offset transform-origin：y-offset-keyword x-offset-keyword z-offset

transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。

2D的变形中的transform-origin属性可以是一个参数值，也可以是两个参数值。如果是两个参数值时，第一值设置水平方向X轴的位置，第二个值是用来设置垂直方向Ｙ轴的位置。

3D的变形中的transform-origin属性还包括了Ｚ轴的第三个值。其各个值的取值简单说明如下：