css3入门(7)变形

2D变形

旋转变形

  • transform:rotate(45deg);
  • 如果角度为正,顺时针旋转,否则逆时针旋转
  • 可以通过transform-origin:0 0;来设置以哪个点为中心进行旋转

缩放变形

  • transform:scale(3);
  • 后面的数字没有单位,大于1表示放大的倍数,小于1表示缩小(0.5就是原来的一半)

斜切变形

  • transform:skew(10deg,20deg)
  • 第一个表示x的斜切角度,另一个表示y的斜切角度

位移变形

  • transform:translate(100px,200px)
  • 第一个表示向右移动,另一个向下
  • 和相对定位差不多也是老家留坑

3D变形

3D旋转

  • 将transform属性的值设为rotateX()或者rotateY(),即可实现绕横轴旋转。纵轴旋转
  • transform:rotateX(30deg);transform:rotateY(30deg);
  • 也可以同时绕x和y一起旋转,中间用空格隔开

perspective属性

  • 这个属性定义透视强度,可以理解为“人眼到舞台的距离”,单位是px
    css3入门(7)变形

空间移动

  • 当元素进行3d旋转之后,就可以继续添加translateX(),translateY(),translateZ()让元素在控件进行移动
  • 一定要记住是在旋转之后再空间移动
  • transform:rotateX(30edg) translateY(40edg) translateZ(50edg);
上一篇:css动画(transition 和 animation)


下一篇:【css】css3动画实现鼠标悬停按钮动画