Help us understand the problem. What is going on with this article?

CSS perspectiveを使ったデザイン

More than 3 years have passed since last update.

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

https://jsfiddle.net/junya_5102/23zh22ow/

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away