これは、CSS3_html/css_WEB-ITnose で画像の 3D 反転効果を実現する方法です。

今日は、純粋な CSS3 効果、つまり写真の 3D 反転をお届けします。

エフェクトをご覧ください：http://webfront.verynet.cc/pc/rotate.html

このエフェクトは主にCSS3のtransformプロパティを使用しています。前のエフェクトとの違いは、今回はアニメーション化されていないことです。ので、アニメーション属性を使用する代わりに、transition 属性を使用します。この属性は 2 つの効果の間で要素を切り替え、トランジション効果を生成します。詳細についてはコードを参照してください。

HTML構造:

 1     <div id="content"> 2         <div class="list"> 3             <img  src="/static/imghwm/default1.png" data-src="../Images/1.jpg" class="lazy" alt="これは、CSS3_html/css_WEB-ITnose で画像の 3D 反転効果を実現する方法です。" > 4             <div class="text"> 5                 这是小狗哦！！ 6             </div> 7         </div> 8         <div class="list"> 9             <img  src="/static/imghwm/default1.png" data-src="../Images/2.jpg" class="lazy" alt="これは、CSS3_html/css_WEB-ITnose で画像の 3D 反転効果を実現する方法です。" >10             <div class="text">11                 这是小狗哦！！12             </div>13         </div>14     </div>

CSSスタイル:

 1 <style type="text/css"> 2         *{margin:0px;padding:0px;} 3         #content{ 4             width:500px; 5             margin:30px auto; 6         } 7         .list{ 8             width:200px; 9             margin:25px;10             float:left;11             position:relative;12         }13         .list img{14             width:200px;15             height:200px;16             transform:perspective(200px) rotateY(0deg);17             opacity:1;18             transition:transform 600ms ease,opacity 600ms ease;19             -webkit-transition:transform 600ms ease,opacity 600ms ease;20         }21         .text{22             height:200px;23             width:200px;24             line-height:200px;25             background:#000;26             color:#fff;27             opacity:0;28             position:absolute;29             text-align:center;30             font-weight:bold;31             top:0px;32             left:0px;33             transform:perspective(200px) rotateY(-180deg);34             transition:transform 600ms ease,opacity 600ms ease;35             -webkit-transition:transform 600ms ease,opacity 600ms ease;36         }37         .list:hover img{38             transform:perspective(200px) rotateY(180deg);39             opacity:0;40             transition:transform 600ms ease,opacity 600ms ease;41             -webkit-transition:transform 600ms ease,opacity 600ms ease;42         }43         .list:hover .text{44             transform:perspective(200px) rotateY(0deg);45             opacity:1;46             transition:transform 600ms ease,opacity 600ms ease;47             -webkit-transition:transform 600ms ease,opacity 600ms ease;48         }49     </style>

コードは分かりやすく、まず初期回転角度を設定します。画像は最初に表示されているため、角度は 180 度、透明度は 1 です。マウスをロールオーバーすると、角度と不透明度を変更して反転させます。後ろのテキストも同様です。