动画

transform: rotate(20deg); /* 旋转 */
transform: skew(45deg); /*　扭曲　skewX(x) skewY(y)　*/
transform: scale(1.5, 0.5); /* 放大与缩小　*/
transform: translate(50px, 100px); /* 元素移动 */

隐藏元素

在 CSS 中，让元素隐藏的方法很多：

• 有的占据空间，有的不占据空间

• 有的可以响应点击，有的不能响应点击

 {
  display: none; /* 不占据空间，无法点击 */
}
 {
  visibility: hidden; /* 占据空间，无法点击 */
}
 {
  position: absolute;
  top: -999em; /* 不占据空间，无法点击 */
}
 {
  position: relative;
  top: -999em; /* 占据空间，无法点击 */
}
 {
  position: absolute;
  visibility: hidden; /* 不占据空间，无法点击 */
}
 {
  height: 0;
  overflow: hidden; /* 不占据空间，无法点击 */
}
 {
  opacity: 0;
  filter: Alpha(opacity=0); /* 占据空间，可以点击 */
}
 {
  position: absolute;
  opacity: 0;
  filter: Alpha(opacity=0); /* 不占据空间，可以点击 */
}

/* IE6/IE7/IE9不占据空间，IE8/FireFox/Chrome/Opera占据空间。都无法点击 */
 {
  zoom: 0.001;
  -moz-transform: scale(0);
  -webkit-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
/* 不占据空间，无法点击 */
 {
  position: absolute;
  zoom: 0.001;
  -moz-transform: scale(0);
  -webkit-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}