CSS3で3D効果を実現する画像wall_html/css_WEB-ITnose

まず効果を見てみましょう: http://1.huizit1.applinzi.com/CSS/transform_3D/img_3D.html

レイアウト構造:

<div class="container">        <img  src="/static/imghwm/default1.png"  data-src="../Img/1.jpg"  class="lazy" alt="CSS3で3D効果を実現する画像wall_html/css_WEB-ITnose" >        <img  src="/static/imghwm/default1.png"  data-src="../Img/2.jpg"  class="lazy" alt="CSS3で3D効果を実現する画像wall_html/css_WEB-ITnose" >        <img  src="/static/imghwm/default1.png"  data-src="../Img/3.jpg"  class="lazy" alt="CSS3で3D効果を実現する画像wall_html/css_WEB-ITnose" >        <img  src="/static/imghwm/default1.png"  data-src="../Img/4.jpg"  class="lazy" alt="CSS3で3D効果を実現する画像wall_html/css_WEB-ITnose" >        <img  src="/static/imghwm/default1.png"  data-src="../Img/5.jpg"  class="lazy" alt="CSS3で3D効果を実現する画像wall_html/css_WEB-ITnose" >        <img  src="/static/imghwm/default1.png"  data-src="../Img/6.jpg"  class="lazy" alt="CSS3で3D効果を実現する画像wall_html/css_WEB-ITnose" >        <img  src="/static/imghwm/default1.png"  data-src="../Img/7.jpg"  class="lazy" alt="CSS3で3D効果を実現する画像wall_html/css_WEB-ITnose" >        <img  src="/static/imghwm/default1.png"  data-src="../Img/8.jpg"  class="lazy" alt="CSS3で3D効果を実現する画像wall_html/css_WEB-ITnose" >        <img  src="/static/imghwm/default1.png"  data-src="../Img/9.jpg"  class="lazy" alt="CSS3で3D効果を実現する画像wall_html/css_WEB-ITnose" >        <img  src="/static/imghwm/default1.png"  data-src="../Img/10.jpg"  class="lazy" alt="CSS3で3D効果を実現する画像wall_html/css_WEB-ITnose" >    </div>

新しく追加されたtranslate-style属性とperspective属性CSS3 で画像に 3D 効果を持たせるには、これら 2 つの属性を追加する必要があります。具体的な説明はここでは省略します。http://www.zhangxinxu.com/wordpress/2012 を参照してください。 /09/css3- 3d-transform-perspective-animate-transition/

コンテナにpreserve-3dのtranslate-styleを追加し、パースペクティブを追加します: 2000px;

ここには合計10枚の写真があります。 10 枚の画像を円形にするには、位置属性を追加する必要があります。絶対値の場合は、幅を同じで中央に設定すると、すべての画像が重なり合います。各画像は Y 軸を中心に 36*i (i:0->9) 度回転され (rotateY)、次に各画像は Z 軸方向に同じ距離だけ移動します (translateZ)。この距離により画像が確実に移動します。重ならないようにしてください。このとき、写真はリングを形成し、3D 効果が得られます。次に、コンテナにアニメーション属性を追加して、Y 軸を中心に回転させると (rotateY)、アニメーションが表示されます。

注: 画像変換に追加された属性:rotateY(0deg) translationZ(350px); 最初に回転してから移動する場合と、最初に移動してから回転する場合の効果が異なるため、rotateY と translationZ の位置を交換することはできません。

ここでは、画像の相対位置と回転軸を参照するために、コンテナに背景色を追加しました。

マウスをクリックして画像を切り替えたい場合は、クリックするたびにコンテナの回転角度に 36 度を追加するだけです。

コードを貼り付けてください:

rree