Tbpgr Blog

Employee Experience Engineer tbpgr(てぃーびー) のブログ

CSS3新要素 | 2D 3D 変形 | transform:perspective

パンくず

CSS3新要素
2D 3D 変形
transform:perspective

概要

要素の奥行きの深さを指定するtransform:perspectiveについて説明します

プロパティ名

transform:perspective()
※2012/03/26現在、ベンダープリフィックスが必要

内容

要素の深度を設定します

サンプル

<!DOCTYPE HTML>
<html lang="ja-JP">
  <head>
    <meta charset="UTF-8" />
    <title>transform:perspective</title>
    <style type="text/css">
    p {
      border-style:dashed;
      border-width:1px;
      border-color:#000;
      background-color:gray;
      width:200px;
      height:100px;
      padding-left:100px;
    }
p.container1 img {
  transform:perspective(15);
  -webkit-transform:perspective(15);
  -moz-transform:perspective(15);
  -ms-transform:perspective(15);
  -o-transform:perspective(15);
  
  -moz-transform: rotateY(70deg);
  -webkit-transform: rotateY(70deg);
  -o-transform: rotateY(70deg);
  -ms-transform: rotateY(70deg);
}
    </style>
  </head>
  <body>
  transform:perspective(15);
  <p class="container1"><img class="transform-perspective1" src="transform-perspective.png" alt="" /></p>
  </body>
</html>

完成画面のキャプチャ