前端基础CSS3之2d模块

2d转换模块

• 格式：

  /*旋转*/
  transform:rotate(45deg);
  /*平移*/
  transform:translate(50px,50px);
  /*缩放*/
  transform:scale(1.5,1.5);
  transform:scale(1.5);
  /*综合变换*/
  transform:rotate(45deg) translate(50px,50px) scale(1.5,1.5);

   

• 变形中心点：

  /*默认情况以元素面中心为形变中心点*/
  transform-origin:5px,5px;
  transform-origin:50%,50%;

   

• 旋转轴向：

  /*默认情况以元素面Z轴旋转*/
  transform:rotateZ(45deg);
  transform:rotateX(45deg);
  transform:rotateY(45deg);

   

• 透视属性：

  /*近大远小的效果*/
  perspective:500px;
  /*该属性添加在需要透视效果的元素的上级元素上，一般是父元素*/

   

• 盒子阴影和文字阴影：

  /*盒子阴影*/
  box-shadow:水平偏移 垂直偏移 模糊度 阴影扩展 阴影色 内外阴影；
  /*文字阴影*/
  text-shadow:水平偏移 垂直偏移 模糊度 阴影色；