CSS
3D変換

Angular 2 AngularJS ASP.NET HTML JavaScript jQuery PHP SVG twitter-bootstrap WordPress
サーチ…


備考

座標系

3D変換は、 ユークリッド空間の (x, y, z)座標ベクトルシステムに従って行われる。

次の画像は、ユークリッド空間の座標の例を示しています。

ユークリッド空間

CSSでは、

  • x軸は水平（左および右）
  • y軸は垂直（上下）
  • z軸は、奥行き（前後、前後）

次の図は、これらの座標がCSSでどのように変換されるかを示しています。

CSSの3次元座標系

3Dキューブ

3D変換は、多くの3D形状を作成するために使用できます。単純な3D CSSキューブの例を次に示します。

HTML： 

<div class="cube">
  <div class="cubeFace"></div>
  <div class="cubeFace face2"></div>
</div>

CSS： 

body {
  perspective-origin: 50% 100%;
  perspective: 1500px;
  overflow: hidden;
}
.cube {
  position: relative;
  padding-bottom: 20%;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  transform: rotateY(45deg) rotateX(0);
}
.cubeFace {
  position: absolute;
  top: 0;
  left: 40%;
  width: 20%;
  height: 100%;
  margin: 0 auto;
  transform-style: inherit;
  background: #C52329;
  box-shadow: inset 0 0 0 5px #333;
  transform-origin: 50% 50%;
  transform: rotateX(90deg);
  backface-visibility: hidden;
}
.face2 {
  transform-origin: 50% 50%;
  transform: rotatez(90deg) translateX(100%) rotateY(90deg);
}
.cubeFace:before, .cubeFace:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  background: inherit;
  box-shadow: inherit;
  backface-visibility: inherit;
}
.cubeFace:before {
  top: 100%;
  left: 0;
  transform: rotateX(-90deg);
}
.cubeFace:after {
  top: 0;
  left: 100%;
  transform: rotateY(90deg);
}

この例を見る
追加のスタイリングがデモに追加され、ホバーで変形が適用されてキューブの6面が表示されます。

それに注意する必要があります：

  • 4面は疑似要素で作られています
  • 連鎖変換が適用される

背面の視認性

backface-visibilityプロパティは3D変換に関連します。

3D変換とbackface-visibilityプロパティを使用すると、要素の元の正面が画面に向かないように要素を回転させることができます。

たとえば、これは要素を画面から外します：

JSFIDDLE 

<div class="flip">Loren ipsum</div>
<div class="flip back">Lorem ipsum</div>

.flip {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-backface-visibility: visible;
  -moz-backface-visibility:    visible;
  -ms-backface-visibility:     visible;
}

.flip.back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
}

Firefox 10+およびIE 10+は、プレフィックスなしでbackface-visibilityをサポートします。 Opera、Chrome、Safari、iOS、Androidはすべて、 -webkit-backface-visibilityが必要-webkit-backface-visibility 。

それは4つの値を持っています：

  1. visible （デフォルト） - 画面を向いていなくても要素は常に表示されます。
  2. hidden - スクリーンに面していないときに要素が表示されません。
  3. inherit - プロパティはその親要素からその値を取得します
  4. initial - プロパティをデフォルトに設定します。これは可視です

3D変換を使用したコンパスポインタまたは針形状

CSS 

div.needle {
  margin: 100px;
  height: 150px;
  width: 150px;
  transform: rotateY(85deg) rotateZ(45deg);
  /* presentational */
  background-image: linear-gradient(to top left, #555 0%, #555 40%, #444 50%, #333 97%);
  box-shadow: inset 6px 6px 22px 8px #272727;  
}

HTML 

<div class='needle'></div>

上記の例では、針またはコンパスのポインタ形状が3D変換を使用して作成されています。一般に、要素にrotate変換を適用すると、 rotateはZ軸でのみ起こり、せいぜい菱形のみになります。しかし、 rotateYトランスフォームがその上に追加されると、要素はY軸で圧迫され、針のように見えます。 Y軸の回転が大きくなればなるほど、要素はより鮮明に見えます。

上記の例の出力は、その先端に置かれた針であろう。ベース上にある針を作成するには、回転をY軸に沿ってではなくX軸に沿って行う必要があります。したがって、 transformプロパティの値はrotateX(85deg) rotateZ(45deg);ようなものでなければなりませんrotateX(85deg) rotateZ(45deg); 。

このペンでも同様の方法で、Safariのロゴやコンパスのダイヤルのようなものを作成します。

変換のない要素のスクリーンショット：

ここに画像の説明を入力

2D変換のみの要素のスクリーンショット：

ここに画像の説明を入力

3Dトランスフォームを使用した要素のスクリーンショット：

ここに画像の説明を入力

影付きの3Dテキスト効果

HTML： 

<div id="title">
  <h1 data-content="HOVER">HOVER</h1>
</div>

CSS： 

*{margin:0;padding:0;}
html,body{height:100%;width:100%;overflow:hidden;background:#0099CC;}
#title{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  perspective-origin:50% 50%;
  perspective:300px;
}
h1{
  text-align:center;
  font-size:12vmin;
  font-family: 'Open Sans', sans-serif;
  color:rgba(0,0,0,0.8);
  line-height:1em;
  transform:rotateY(50deg);
  perspective:150px;
  perspective-origin:0% 50%;
}
h1:after{
  content:attr(data-content);
  position:absolute;
  left:0;top:0;
  transform-origin:50% 100%;
  transform:rotateX(-90deg);
  color:#0099CC;
}
#title:before{
  content:'';
  position:absolute;
  top:-150%; left:-25%;
  width:180%; height:328%;
  background:rgba(255,255,255,0.7);  
  transform-origin: 0 100%;
  transform: translatez(-200px) rotate(40deg) skewX(35deg);
  border-radius:0 0 100% 0;
}

ホバー効果を追加した例を見る

影付きの3Dテキスト効果

この例では、テキストは、ユーザーから離れた画面に表示されるように変形されています。

それに応じて影が変換されてテキストに従います。擬似要素とdata属性で作られているので、それはその親（H1タグ）からの変換を継承します。

白い「光」は#title要素の擬似要素で作られます。斜めになっており、丸みを帯びたコーナーにボーダー半径を使用します。



Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow