前端基础CSS3之2d模块

2d转换模块

• 格式：

  /*旋转*/
  transform:rotate(45deg);<!--顺时针旋转45度-->
  /*平移*/
  transform:translate(50px,50px);<!--向右和向下平移50像素-->
  /*缩放*/
  transform:scale(1.5,1.5);<!--在水平和垂直方向放大1.5倍-->
  transform:scale(1.5);<!--效果同上，简写形式-->
  /*综合变换*/
  transform:rotate(45deg) translate(50px,50px) scale(1.5,1.5);<!--空格隔开；2d转换模块改变坐标系-->

   

• 变形中心点：

  /*默认情况以元素面中心为形变中心点*/
  transform-origin:5px,5px;<!--自定义形变中心点，以左上角为零点，形变中心点为向右和向下5个像素位置的点-->
  transform-origin:50%,50%;<!---百分比形式->
  transform-origin:center,center;<!--关键字形式-->

   

• 旋转轴向：

  /*默认情况以元素面Z轴旋转*/
  transform:rotateZ(45deg);<!--绕Z轴旋转45度-->
  transform:rotateX(45deg);<!--绕X轴旋转45度-->
  transform:rotateY(45deg);<!--绕Y轴旋转45度-->

   

• 透视属性：

  /*近大远小的效果*/
  perspective:500px;<!--距离元素500像素观看元素，取值越小效果越明显-->
  /*该属性添加在需要透视效果的元素的上级元素上，一般是父元素*/

   

• 盒子阴影和文字阴影：

  /*盒子阴影*/
  box-shadow:水平偏移 垂直偏移 模糊度 阴影扩展 阴影色 内外阴影；<!--默认外阴影；阴影颜色默认与盒子内内容颜色相同；一般只写前三个值；-->
  /*文字阴影*/
  text-shadow:水平偏移 垂直偏移 模糊度 阴影色；