hooyantsing's Blog

P175_24_2D变形参考点使用

字数统计: 142阅读时长: 1 min
2020/04/22

P175 24 2D变形参考点使用

transform-origin

参考点。

前面**[****P174 23 快速制作3D立体按钮]**已经提到过。

应用于**旋转(rotate)**:

5f3066543dee5587310884d1fa16cce1.png

:参考点可以位于图形外面。

1
2
3
transform-origin: right bottom;
//可以通过百分比
transform-origin: 100% 100%;

应用于倾斜**(skew)**:

2efc58bef5890c5b2ffa68986985a208.png

1
2
3
//X水平方向倾斜 bottom固定了下边不动 上边动
transform: skewX(-45deg);
transform-origin: left bottom;

70176c87e6618494a17f24392eafdd39.png

1
2
3
//Y垂直方向倾斜 left固定了左边不动 右边动
transform: skewY(-45deg);
transform-origin: left bottom;

**

**

3D效果

Z轴参数不能为百分比。

1
transform-origin: left bottom 300px;
CATALOG