CSS3入门之2D、3D、过度、动画

2D 3D 过度 动画

• 2D效果 主要是平面的一些常规操作 transform属性

1. 移动 transform: translate(20px,30px); 水平移动 和 垂直移动 水平沿X轴方向进行 垂直沿Y轴方向进行
   属性值可以为负值 水平方向负值往左移动 垂直方向负值往上移动
2. 缩放 transform: scale(2, 4); 同样也是水平 和 垂直方向 的放大缩小
3. 旋转 transform: rotate(90deg); 默认以中心坐标旋转 坐标点也可以指定 指定坐标点的属性 transform-origin: 50px 100px; 或者是方位值 可以是具体的像素值
4. 倾斜 transform: skew(20deg, 30deg); 同样也是水平 和 垂直方向

• 3D 主要是有立体感 实现一些炫酷的效果

1. 旋转 transform: rotateX(50deg); transform: rotateY(50deg);等

• 过度 从一种样式逐渐改变到另一种效果 需要满足两个条件
  1、添加到CSS属性上 transition: width 2s, height 2s, transform 2s; 作用于宽度、高度、2D效果上等
  2、设置效果时长
• 动画 ->变形 过度 动画 通过animation属性实现 需要满足两个条件
  1、动画名称
  2、动画时长
  格式：
  标签 {
  /* 使用动画 anim 时长 3秒 */
  animation: anim 3s;
  }
  @keyframes anim{
  属性：值；
  }

    
    
    



    

    
盒子

    
盒子