純粋な CSS3 を使用して 3D 回転を実装する book_html/css

純粋な CSS3 を使用して 3D 回転を実装する book_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:23:36

オリジナル

1214 人が閲覧しました

一部の最先端の電子商取引 Web サイトでは、3D モデルを使用して商品を表示し、オンラインのカスタマイズをサポートし始めています。その中で書籍の表示は最も単純なものです

画像と CSS3 変換を使用する複雑なモデリングプロセスは必要ありませんシンプルで実用的な、より良い表示効果を実現できます。

本の 3D モデルは、基本的に表/裏表紙と左側のシールが付いた立方体であるため、すべての製品の中で最も単純です。

したがって、3D 本の表示を構築するには、問題は立方体 + 回転 + 画像の背景の構築に分解されます。

1. 立方体を構築する

立方体を作成するには、まず仮想 3 次元視覚空間を作成する必要があります。これは、コンテナ要素のパースペクティブ属性を設定することで取得できます。

.stage {    width: 200px;    height: 260px;    perspective: 1000px;    perspective-origin: center center;// 缺省值，可忽略}

ログイン後にコピー

上記のコードは、要素を観測点 (Z 軸) から 1000 ピクセル離れた位置に、X/Y 軸の中心に配置します。

<div class="stage">    <div class="cube">        <figure class="back"></figure>        <figure class="top"></figure>        <figure class="bottom"></figure>        <figure class="left"></figure>        <figure class="right"></figure>        <figure class="front"></figure>  </div></div>

ログイン後にコピー

次に、コンテナ要素の中に上下左右前後の 6 面を持つ立方体要素を追加します。Figure を使用する理由は、テクスチャをサポートする必要があるためです。

本の厚さ、長さ、幅に基づいて立方体の各面の座標位置を決定する必要があります。この例では、使用される本のモデル (MySQL 本) の絶対的な厚さは 18.2 ピクセルです。高さは260px、幅は197.6pxです。

したがって、単純な幾何学的知識に基づくと、立方体の中心から表と裏の間の距離は 18.2/2=9.1 ピクセルであり、「裏」要素を裏返す (つまり、「裏返す」) 必要があります。

.front {    transform: translateZ(9.1px);}.back {    transform: rotateY(180deg) translateZ(9.1px);}

ログイン後にコピー

同様の計算方法を使用して、他の 4 つの辺 (移動 + 回転変換) をそれぞれの位置に配置して、仮想立方体を組み立てることができます。

.front {    transform: translateZ(9.1px);}.back {    transform: rotateY(180deg) translateZ(9.1px);}.top {    transform: rotateX(90deg) rotateZ(90deg) translateZ(98.8px) translateY(-89.7px);    width: 18.2px;    height: 197.6px;}.bottom {    transform: rotateX(-90deg) rotateZ(90deg) translateZ(161.2px) translateY(-89.7px);}.left {    transform: rotateY(-90deg) translateZ(9.1px);    width: 18.2px;}.right {    transform: rotateY(90deg) translateZ(188.5px);    width: 18.2px;}

ログイン後にコピー

2. カバーを追加します。次に、前面、背面、左側の要素に背景画像を追加し (1 つの画像を使用して、別の位置からキャプチャすることができます)、他の 3 つの側面に背景色を追加します。「底部」を与える表面に影の効果を追加します:

.front {    transform: translateZ(9.1px);    background: url("//wow.techbrood.com/uploads/160301/mysql.png") top right;    background-size: auto 100%;}.back {    transform: rotateY(180deg) translateZ(9.1px);    background: url("//wow.techbrood.com/uploads/160301/mysql.png") top left;    background-size: auto 100%;}.top {    transform: rotateX(90deg) rotateZ(90deg) translateZ(98.8px) translateY(-89.7px);    background: #fafafa;    width: 18.2px;    height: 197.6px;}.bottom {    transform: rotateX(-90deg) rotateZ(90deg) translateZ(161.2px) translateY(-89.7px);    background: #ccc;    width: 18.2px;    height: 197.6px;    -webkit-filter: drop-shadow(0 0 26px rgba(0, 0, 0, 0.75));}.left {    transform: rotateY(-90deg) translateZ(9.1px);    background: url("//wow.techbrood.com/uploads/160301/mysql.png") top center;    background-size: auto 100%;    width: 18.2px;}.right {    transform: rotateY(90deg) translateZ(188.5px);    background: #ddd;    background-size: auto 100%;    width: 18.2px;}

ログイン後にコピー

このようにして、リアルな 3D 本のビジュアルモデルを実現しました。

3. 回転アニメーションを追加します

これは比較的簡単で、rotateY メソッドを使用するだけです。

@-webkit-keyframes rotate {    0% {        transform: rotateY(0) translateX(-18.2px);    }    100% {        transform: rotateY(360deg) translateX(-18.2px);    }}

ログイン後にコピー

の最終的なレンダリングは次のとおりです:

Tade.com (http://wow.techbrood.com/fiddle/17587) で自分で試すことができます。

by iefreer