4.1变形

• 旋转

  书写格式：transform：rotate（角度）；

  取值：rotate（默认值） z轴旋转

  注：给角度正值为顺时旋转，给负值为逆时针旋转

  transform: rotate(45deg);
  transform: rotateZ(45deg);
      transform: rotateX(-180deg);
      transform: rotateY(32deg);

  rotate(角度)（默认值）Z轴旋转

  transform: rotateZ（角度）Z轴旋转

  transform: rotateX（角度）X轴旋转

  transform: rotateY（角度）Y轴旋转

  角度给正为顺时针，给负为逆时针

• 缩放

  书写格式：transform: scale(倍数);

  取值：大于1是放大，小于是缩小（且不会影响其他元素的尺寸）

  建议：放大某个元素时，给父元素添加overflow：hidden

  避免由于放大遮挡相邻元素的内容

• 多个变形效果同时生效

  书写格式：transform: scale(2) rotate(45deg);

  transform: 旋转 缩放 倾斜

  transform: scale(2) rotate(45deg);
      background-color: gold;

• 倾斜skew

  书写格式：transform:skew（角度）;

  角度给正向左倾斜，给负值向右倾斜

  transform: skew(30deg);

• 偏移量

  书写格式：transform:translate(X轴偏移量，Y轴偏移量)

  偏移量给正值，往相反方向移动

  偏移量给负值，往相同方向移动

   transform: translate(-20px, 20px);
      transform: scale(0.5) rotateY(180deg) skew(10px, 10px);

• 画三角形

  <div>width: 0px;
      border: 30px solid transparent;
      border-top-color: tomato;
  <div>

• 三角旋转

  本例：设置旋转的点（坐标）

  transform-origin:X轴位置，Y轴位置

  即X轴与Y轴交叉点就是旋转点 */

  transform-origin: 50% 25%;

   

标签：rotate,变形,skew,transform,偏移量,旋转,角度
来源： https://www.cnblogs.com/zy950203/p/14940198.html