視点の使用を強化し、変換: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にあります。
ソースコードクリックしてダウンロードします
上記は、この記事のすべての内容です。