search
LoginSignup
23

More than 5 years have passed since last update.

posted at

updated at

CSS perspectiveを使ったデザイン

PCのChrome, Safari, Fifefox それぞれ最新版で 確認。

perspectiveは 3D配置された子要素に遠近感を与えるプロパティ。
perspective: ??px(em); 初期値: none, 数値で指定 (0,負の値は無効)

3D 配置された要素に遠近感を与えるため、z=0 平面とユーザ間の距離を決めます。z>0 である 3D 要素はより大きく、z<0 である 3D 要素はより小さくなります。効果の強度はこのプロパティの値から決められます。

引用元: perspective - CSS | MDN

perspective と rotateY( )

sample1.gif

<div class="menu column" ontouchstart="">
  <div class="title">perspective</div>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</div>
.menu{
  display: flex;

  /* 子要素サイズに応じて可変 */
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: auto;

  transform-style: preserve-3d;
  perspective: 1000px;
}

/* 縦並び */
.menu.column{
  flex-flow: column nowrap;
  border-left: .35em solid dodgerblue;
}

/* 共通 */
.menu .title,
.menu a{
  display: block;
  padding: .5em 1em;

  color: white;
}

.menu .title{
  background-color: dodgerblue;
}

.menu a{
  background-color: rgba(22,22,22,1);
  transition: .3s;
}

.menu.column a{
  transform-origin: left center;
  transform: rotateY(90deg);
}

.menu.column a + a{
  border-top: 1px solid currentColor;
}

/* animation  */
.menu:hover a{
  transform: none;
}

.menu a:hover{
  background-color: rgba(0,0,135,1);
}

perspectiveを指定しないと...

sample2.gif


perspective と rotateX( )

sample5.gif

<div class="menu row" ontouchstart="">
  <div class="title">perspective</div>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</div>
.menu{
  display: flex;

  /* 子要素サイズに応じて可変 */
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: auto;

  transform-style: preserve-3d;
  perspective: 1000px;
}

/* 横並び */
.menu.row{
  flex-flow: row nowrap;
  border-bottom: .35em solid dodgerblue;
}

/* 共通 */
.menu .title,
.menu a{
  display: block;
  padding: .5em 1em;

  color: white;
}

.menu .title{
  background-color: dodgerblue;
}

.menu a{
  background-color: rgba(22,22,22,1);
  transition: .3s;
}

.menu.row a{
  transform-origin: center bottom;
  transform: rotateX(90deg);
}

.menu.row a + a{
  border-left: 1px solid currentColor;
}

/* animation  */
.menu:hover a{
  transform: none;
}

.menu a:hover{
  background-color: rgba(0,0,135,1);
}

perspective の値の大きさによる違い

perspective: 1000px;
sample6.png

perspective: 30px;
sample3.png

perspective-origin

ユーザの視点を決めます
perspective-origin: x y; 初期値は50%, 数値またはキーワードで指定。

キーワード centerは 50%と同義
(他に、left right top bottomがあります)

perspective-origin: left bottom;とすれば 左下から見ている感じになります。

perspective-originによる見え方の違い

perspective: 800px;と指定
sample4.gif

左から center center , center top, center bottom, left top, left center, left bottom, right top, right center, right bottom

demo

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
23