目录

动画

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);
}