2017-02-24 CSS 学习笔记 pm

2D 转换模式

transform:rotate(45deg)
deg 是单位，代表旋转多少度

transform:translate(100px,0px);
第一个参数水平方向
第二个参数垂直方向
代表块的平移

transform:scale(1.5);
元素的缩放
第一个参数：水平方向
第二个参数：垂直方向
注意点：如果取值是1，代表不变
如果取值大于1，代表需要放大
如果取值小于1，代表需要缩小
如果水平和垂直缩放都一样，那么可以简写为一个参数

• 连写注意点
• 如果需要进行多个转换那么用空格隔开
• 2D 的转换模块会修改元素的坐标系，所以旋转之后再平移就不是水平平移了

transform:rotate(45deg) translate(100px,0px) scale(1.5,1.5);

2D 转换模块-形变中心点

• 默认情况下所有的元素都是以自己的中心点作为参考来旋转的，我们可以通过形变中心点属性来修改它的参考点

transform-origin:200px 0px;
transform-origin:50% 50%;
transform-origin:center center;

• 第一个参数：水平方向
• 第二个参数：垂直方向
  注意点
  取值三种形式，具体像素/百分比/特殊关键词

2D 转换模块-旋转轴向

• 什么是透视
  近大远小
  注意点
  一定要注意，透视属性必须添加到需要呈现近大远小效果的元素的父元素上面

perspective:500px;

• 默认情况所有元素都是围绕 Z 轴进行旋转的
• 想围绕哪个轴旋转那么就在 rotate 后面直接加上哪个轴即可

transform:rotateY(45deg);
transform:rotateX(45deg);