視点の使用を強化し、変換：Translatez。従来の製品ディスプレイはユーザーの注意をうまく引き付けることはできませんが、適切な3D要素がディスプレイに追加されている場合、効果は良い〜〜
効果マップ：
説明：この創造性は私が思うものではありません。他の人を模倣して、創造性はw3cplusにあるべきです。もちろん、ポイントは皆にそれを行う方法を教えることです。ただ高い模倣になります〜
まず第一に、CSS3を使用して正方形を作ることを教えてください。
CSSがある前に、そのような立方体を作るのが難しいはずです〜さて、私はそれが難しいと思います〜
HTML：
<body> <div class = wapper> <div class = cube> <div class = sign> 1 div> <div class = size back> 6 </div> <div class = sign right> 4 </div </div </div> <div class = size left> 3 </div> <div class = size top> 5 </div> <div class = sign bottom> 2 </div> </div> </body>
この効果の段階、つまり、複数の要素が舞台を共有する場合、ドアの前の要素が異なります。キューブはキューブを表し、次に6 divが各側面を表します。
div＃キューブ設定変換スタイル：preserve-3d、そして各要素を回転させて翻訳します
これで、すべての麺が同じ飛行機に重複しているので、私たちはあきらめます：
フォントは前方に移動し、Z軸方向の半マルン（50px）の距離は50pxです。
バックは最初にY軸の周りで180度回転し、フォントが外側にあるように、次に翻訳（50px）を回転させます。下。
同様に、他の平面はX軸またはY軸の周りで90度回転し、次に翻訳（50px）
CSS：
.wapper {100px：100px： ;幅100px;高さ：100px：RGBA（255、99、71、0.6）。 ;} .top {-webkit -transform：rotatex（90deg）translatez（50px）;}。 90deg）translatez（50px）;} .bottom {-webkit-transform：rotatex（-90deg）translatez（50px）;} .back {-webkit-transform：rotatey（-180deg）（50px）;}ディスプレイ効果については、視点の距離を調整できます〜
まあ、キューブは理解されているので、この製品ディスプリは2つの場所を表しています。
HTML：
<！doctype html> <html> <head> <title> </title> <utf-8> <link href = css/reset.css rel = styleSheetタイプ=テキスト/css> </head> <body > <ul id = content> <li> <div class = wrapper> <img src = image/a.png> <span class = information> <strong>契約</strong> easiet way a act form form form。 </span> </div> </li> <li> <div class = wrapper> <img src = images/b.jpeg> <span class = information> <strong>契約>あなたのショップに汚染フォームを追加します</span> </div> </li> <div class = wrapper> <img src = c.png> <span class =情報> <strong> </strong>ショップに連絡先フォームを追加する最も簡単な方法
CSS：
<style type = text/css> body {font-family：tahoma、arial;} #content {margin：100px auto 0;} #content li、#content .wrapper、#content li img、#contententit li span {width： 310px;}＃cursor：4000px： 888888;*/} #content .wrapper {related：-webkit-transform-3d; ：3px-shadow：0、0、0.3） ：-webkit-gradient（線形、左上、左下、カラーストップ（0％、RGBA（236、241、244、1））、カラーストップ（100％、RGBA（190、202、217、1 1 1 、1 1、1 1、1 1、1 1、1 1、1 1、117、1 1、117、1、1、117、1 1、1 1、1 1、117、1 1、1 1、1 1 、117、1 1、1 1、1 1、1 1、1 1、117、1 1、1 1、1、1、1、1 1、1 1、1 1、1、1 1、1 1、 1、117、1））; 6S：0.15px：1px 1px 1px; 255、255、0.5）;変換：rotatex（95deg）;} #content li：hover img {box-shadow：none：15px;} 、0.3）;ボーダーラジウス：3px;} </style>CSSは基本的に上記で分析されています。すべての製品共有段階を許可するので、div.wapperを追加して、transform-syle：preverse-3dを設定し、各LIをステージ効果の視点を設定します。最終的なフリップ効果は、実際にはdiv.wapperにあります。
ソースコードクリックしてダウンロードします
上記は、この記事のすべての内容です。