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

一部の最先端の電子商取引 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