CSS3 transform & transition & 例子

1. transform

1.1 基本概念

transform属性主要用于元素的变形处理,对元素进行旋转、缩放、移动或倾斜。

1.2. transform的属性

• translate : 平移
  指定对象2D平移,第一个参数对应X轴,第二个参数对应Y轴。
  一个参数时：表示水平方向移动距离。
  两个参数时：第一个参数表示水平方向移动距离，第二个参数对应垂直方向移动距离。

.before {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #DCF7A1;
        }
.after {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #DDF0ED;
            -webkit-transform: translate(50px, 30px);
            -moz-transform: translate(50px, 30px);
            -ms-transform: translate(50px, 30px);
            -o-transform: translate(50px, 30px);
            transform: translate(50px, 30px);
        }

translate.png

• rotate : 旋转
  指定对象2D旋转，需要有transform-origin属性定义中心点，默认为中心点。 顺时针方向旋转为正值，逆时针方向旋转为负值。

  .before {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #DCF7A1;
        }

  .after {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #DDF0ED;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }

rotate.png

设置中心点

transform-origin: 200px 200px;

rotate.png

• scale: 缩放
  指定对象2D缩放,第一个参数对应X轴，第二个参数对应Y轴。
  一个参数时：表示水平，垂直都缩放该倍率。
  两个参数时：第一个参数对应水平方向缩放倍率，第二个参数对应垂直方向缩放倍率。默认原点transform-origin是中心点。

.before {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #DCF7A1;
        }
.after {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #DDF0ED;
            -webkit-transform: scale(0.5,0.5);
            -moz-transform: scale(0.5,0.5);
            -ms-transform: scale(0.5,0.5);
            -o-transform: scale(0.5,0.5);
            transform: scale(0.5,0.5);//效果等同于transform: scale(0.5);
        }

scale.png

设置中心点

transform-origin: 200px 200px;

scale.png

• skew: 倾斜
  指定对象倾斜扭曲。
  一个参数时：表示水平方向的倾斜角度。
  两个参数时：第一个参数对应水平方向倾斜角度，第二个参数对应垂直方向倾斜角度。默认原点transform-origin是中心点。

.before {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #DCF7A1;
        }
 .after {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #DDF0ED;
            -webkit-transform: skew(30deg, 0deg);
            -moz-transform: skew(30deg, 0deg);
            -ms-transform: skew(30deg, 0deg);
            -o-transform: skew(30deg, 0deg);
            transform: skew(30deg, 0deg);
        }

skew.png

2. transition

2.1 基本概念

主要用于元素的过渡动画处理

语法：

transition: property duration timing-function delay; 

2.2 transition属性

• property
  设置过渡效果中参与过渡效果的CSS属性。如width,opacity,color等。
  all属性:如果想给元素执行所有transition效果的属性，可以用all属性值来操作。

• duration
  设置完成过渡效果所需的时间。

• timing-function
  设置过渡效果的动画类型。

linear(匀速)      ease(逐渐变慢)
ease-in(加速)     ease-out(减速)
ease-in-out(先加速后减速)
cubic-bezier(n,n,n,n)(自定义时间曲线);

• delay
  设置延迟过渡效果的时间。
  单位为s（秒）或者ms(毫秒)，默认值是0。
• 详细transition教程请戳

3. 鼠标滑过图片效果的例子

效果展示.gif
完整代码，请戳CSS3鼠标滑过图片效果