CSS3——transform

属性值可点击跳转

transform

属性值有：

rotate: (旋转)

　　rotate( )；2D

　　rotateX( );

　　rotateY( );

　　rotateZ( );

　　rotate3D( );

　　括号里面正常都是填角度值（deg）

origin：(起源中心点)

　　origin是为旋转的设置以哪个点旋转的

　　origin（0，0）就是以左上角的点为中心旋转，还可以设置（center，center）就是以图片的中心点旋转

　　其实就是X跟Y，可以根据自己需求设置

scale:（伸缩）

　　伸缩的是此元素的变化坐标轴的刻度，不是元素的大小

　　scaleX( );

　　scaleY( );

　　scaleZ( );

　　scale3D( );   就是x、y、z三个的和，就是scale3D（x,y,z）

skew:（倾斜）

　　skewX( );

　　skewY( );

translate：(转变)

　　translateX( );

　　translateY( );

　　translateZ( );

　　tramslate3D( );

景深

　　 perspective:

　　 perspective-origin: 

　　transform-style: preserve-3d

----------------------------------分界线--------------------------------------

然后我们一起来了解一下什么是transform，是怎么使用的

 rotate()

　　调节deg的值就可旋转图片，我们注意到它旋转是以图片的中心点为旋转的中心点的

 

  我们来设置一下origin（0，0），就是以左上角为中心旋转点旋转的

我们上面看到的效果都是为2D效果的，接下来我们来了解3D效果

rotateX( );

想要设置3D效果，需要先在旋转元素的父级上添加这些东西子元素才会以3D的效果展示， 这个后面会详细讲解的

现在来看看X轴的3D效果

rotateY( );

再来Y轴的3D效果

rotateZ( );

再来看看Z轴，Z轴就是相当于立体的面向我们的轴，，，就跟有人拿着剑指着你一样，剑就是Z轴

注意点当你设置多个旋转轴的时候，你旋转第一个轴，元素所参照的坐标轴也会跟着一起旋转的

看一下动图

 我们要记得，旋转的角度一样，顺序不一样，结果也是不一样的。

 rotate3D( X， Y ，X ，deg);

　　 首先是先设置一个矢量 / 向量。

　　X，Y，Z绘制的是空间的矢量图，设置的是比值，而不是角度

　　

我们来看看是怎么使用的：

（平面轴）不涉及Z轴

我们设置的值是1 ：1：0，方向是45度

。

这个轴的方向就是这个方向

（空间轴）

我们再设置1：1：1看看是什么样的

取B点这条线做3D旋转

我们可以看到，图片是围绕着B点这条轴旋转的

scale

scaleX(), scaleY(), scaleZ()

可以直接写成 scale(X,  Y,  Z)

里面是直接填数字，比1大是伸，比1小是缩

注意点：

　　伸缩轴会随着元素的旋转而旋转

先设置scale后设置rotate

先设置rotate后设置scale，随着旋转元素的Y轴是会变形的

scaleZ（）

就迎面往前的方向

  skew

 skew（x, y）以X轴Y轴倾斜。是以元素坐标轴倾斜的

 translate

　　 以自身为参考坐标

translateX:

traslateY()

X,Y一起使用

translate还有一个很好用的小技巧

  就是可以在不知道自己自身宽高的情况下实现居中

 translateZ()

 我们先把图片旋转为Y轴80度，方便我们观看Z轴的变化

以上的translat设置的都是为2D视角的

 

现在我们来了解一下3D

景深

就是我们上面用到的东西，需要在父级设置perspective：***px我们子级才会变成3D空间的属性

perspective:

眼睛距离元素的位置距离

 perspective-origin: 

就是你的眼睛在哪里看的位置，设置你眼睛所在的位置，正常设置X，Y。还可以设置空间位置，X，Y，Z

 

transform-style: preserve-3d  这个可以直接设置在子元素身上，可以变成三维空间呈现

 

转载于:https://www.cnblogs.com/yangpeixian/p/11233697.html