CSS3の3D TransformsとPerspectiveを利用した直方体の作り方

＞ デモはこちら

CSS3の勉強をもっとしなきゃな！ってことで、後述するサイトのデモを参考に勉強させてもらいました。transformとperspectiveを利用して作ってみたのでやり方を書いておきます。

htmlの設定

htmlはごくごく普通に記述します。spanは後ほど影を設定する為のタグになります。

<ul class="grid">
  <li class="one"><span class="s"></span></li>
  <li class="two"><span class="s"></span></li>
  <li class="three"><span class="s"></span></li>
</ul>

cssの設定

ほぼ参考先と同じですが、こまごまとした解説をコード内に書いていきますね。

body{
  overflow:hidden;
  /*遠近感を設定*/
  perspective:3000;
  -webkit-perspective:3000;
  -moz-perspective:3000;
  -ms-perspective:3000;
}
.grid{
  position:absolute;
  /*幅とマージンの合計*/
  width:1120px;
  /*Transformで3Dの傾きをつける*/
  transform: rotateX(60deg) rotateZ(35deg);
  -webkit-transform: rotateX(60deg) rotateZ(35deg);
  -moz-transform: rotateX(60deg) rotateZ(35deg);
  -ms-transform: rotateX(60deg) rotateZ(35deg);
  /*子要素も立体表示されるように設定する*/
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
}
.grid li{
  height:400px;
  width:225px;
  float:left;
  margin:30px;
  list-style-type:none;
  background-size:0,cover;
  /*子要素も立体表示されるように設定する*/
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
}
/*立体に見せるための2面は擬似要素で*/
.grid li:before, .grid li:after{
  content:'';
  position:absolute;
  /*100% height and width*/
  top:0; left:0; right:0; bottom:0;
  background:inherit;
  background-size: cover;
}
/*右面*/
.grid li:before{
  transform-origin:right center;
  -webkit-transform-origin:right center;
  -moz-transform-origin:right center;
  -ms-transform-origin:right center;
  transform:rotateY(-90deg);
  -webkit-transform:rotateY(-90deg);
  -moz-transform:rotateY(-90deg);
  -ms-transform:rotateY(-90deg);
  /*ここのwidthとleftは合計してコンテンツ幅になるようにしないと上手くいかない*/
  width:30px;
  left:195px;
  background-position:right center;
}
/*底面*/
.grid li:after{
  transform-origin:bottom center;
  -webkit-transform-origin:bottom center;
  -moz-transform-origin:bottom center;
  -ms-transform-origin:bottom center;
  transform:rotateX(90deg);
  -webkit-transform:rotateX(90deg);
  -moz-transform:rotateX(90deg);
  -ms-transform:rotateX(90deg);
  height:30px;
  top:auto;
  bottom:0;
  background-position:bottom center;
}
/*影用*/
.s{
  position:absolute;
  /*それぞれの辺から30px小さくする*/
  top:30px; left:30px; right:30px; bottom:30px;
  background:rgba(0,0,0, 0.3);
  box-shadow:0 0 30px 30px rgba(0,0,0, 0.3);
  /*Z軸の深さを設定して影を落とす距離を設定*/
  transform:translateZ(-70px);
  -webkit-transform:translateZ(-70px);
  -moz-transform:translateZ(-70px);
  -ms-transform:translateZ(-70px);
}
/*それぞれにグラデーションによるライティングを設定*/
.one{background:linear-gradient(45deg,rgba(0,0,0,0),rgba(0,0, 0,0.5)),url("pic1.jpg");
}
.two{background:linear-gradient(45deg,rgba(0,0,0,0),rgba(0,0,0,0.5)),url("pic2.jpg");
}
.three{background:linear-gradient(45deg,rgba(0,0,0,0),rgba(0,0,0,0.5)),url("pic3.jpg");
}

なんだか記述が多いように見えますがベンダープレフィックスが多いだけなので、実際には結構簡単な記述で実現することができます。参考サイトではモバイルアプリの画面をかっこよく見せるためのモックとして作ったようですが、他にもいろいろ使えそうな気がします。

こちらを「Perspective Mobile App Mockups」を参考にさせていただきました！
Thank you!：)

では！