CSS2D动画效果

初略的介绍一下一些css相关的2D动画效果
(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

一.旋转 rotate

用法:transform: rotate(45deg);

共一个参数“角度”,单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45度。

二.缩放 scale

用法:transform: scale(0.5) 
     transform: scale(0.5, 2);

参数表示缩放倍数;

一个参数时:表示水平和垂直同时缩放该倍率
两个参数时:第一个参数指定水平方向的缩放倍率,第二个参数指定垂直方向的缩放倍率。

三.倾斜 skew

用法:transform: skew(30deg)
     transform: skew(30deg, 30deg);

参数表示倾斜角度,单位deg

一个参数时:表示水平方向的倾斜角度;
两个参数时:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度。

四.移动 translate

用法:transform: translate(45px)
     transform: skew(45px, 150px);

参数表示移动距离,单位px,

一个参数时:表示水平方向的移动距离;
两个参数时:第一个参数表示水平方向的移动距离,第二个参数表示垂直方向的移动距离。

下面是代码实例:

css放在在一个独立的名叫css的文件夹里

html部分


<html>
 <head>
  <meta charset="utf-8" />
  <title>title>
  <link rel="stylesheet" href="css/css.css" />
 head>
 <body>
  <div class="name">div>
  <div class="name1">div>
  <div class="name2">div>
  <div class="name3">div>
 body>
html>

css部分的代码

.name,.name1,.name2,.name3{
 margin: 100px auto;
 width: 200px;
 height: 200px;
 background: pink;
 transition: 2s;
 transform-origin: left;
}
.name:hover{
 transform: rotate(360deg);
}
.name1:hover{
 transform: scale(0.5,1.5);
}
.name2:hover{
 transform: skew(60deg,60deg);
}
.name3:hover{
 transform: translate(100px,100px);
}

执行结果如果没有问题的话应该是四个居中的能动的粉色小方格!

你可能感兴趣的:(笔记,css3)