transform: translate(水平方向 垂直方向);
transform: rotate(deg);
- 其中deg是单位, 代表多少度
-
transform: scale(1.1)
第一个参数:水平方向
第二个参数:垂直方向
- 【19-2D转换模块】注意点:
如果取值是1, 代表不变
如果取值大于1, 代表需要放大
如果取值小于1, 代表需要缩小
如果水平和垂直缩放都一样, 那么可以简写为一个参数
/*transform:rotate(0deg); */ /*transform:none; */ transform:scale(1.5);
- 由于设置了缩放效果，默认鼠标移入进去的时候缩放并把旋转效果清除。
- 注意点:
- 如果需要进行多个转换, 那么用空格隔开
- 2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的
- transform-origin:水平方向 垂直方向;
第一个参数:水平方向
第二个参数:垂直方向
- 注意点
取值有三种形式
具体像素 transform-origin: 200px 0px;
百分比 transform-origin: 50% 50%;
特殊关键字 transform-origin: center center; - 默认情况下所有的元素都是以自己的中心点作为参考来旋转的, 我们可以通过形变中心点属性来修改它的参考点
- 默认情况下所有元素都是围绕Z轴进行旋转
* transform:rotateX(deg); * transform:rotateY(deg); * transform:rotateZ(deg);
- 总结:
想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可 -
文章图片
旋转轴向.jpg
文章图片
坐标系.png
近大远小
-
文章图片
近大远小.jpg
2.注意点
一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面
- perspective: 500px; 数值越大看的事物越符合从远处观看的效果！
