【CSS】 translate()関数を使ったメニュー：translateY()

CSS3のtranslate関数はtranslate(x, y)、translateX()、translateY()の３つを使って要素の移動距離を指定します。

translate()を使ったメニュー作り

下記のようにマウスオーバーした際にメニューが下から現れるように垂直方向に要素を移動させるtranslateY()を指定します。

▼　以下のバーにマウスを当ててみてください。

Land on Stranger's Head

Burrow under covers stare at the wall

.container {
  width: 500px;
  height: 250px;
  overflow: hidden;
  margin: 0 auto;
  }
.pullUp {
  width: 400px;
  height:100px;
  margin: 0 auto;
  padding: 2.2em;
  text-align: center;
  line-height: 2em;
  background-color: #f7f7eb;
  border: 1px dotted #00b3ff;
  position: relative;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transform: translateY(100px);
  transition: all 0.5s ease-in-out;
}

▼　以下のバーにマウスを当ててみてください。

Burrow under covers stare at the wall

Land on Stranger's Head