CSS反転トグル

CSS フリップ スイッチ - 3D 効果を簡単に実現

CSS は、フロントエンド開発において不可欠かつ重要なテクノロジであり、その強力なスタイル制御機能により、Web デザインがより柔軟で多様になります。 CSS では、transform 属性を制御することでさまざまな 3D 効果をすばやく実現できますが、その中で最もよく使用されるのがフリップ切り替えです。この記事では、CSS フリップスイッチングの基本原理と実装方法を紹介し、3D 効果を実現するスキルを簡単に習得できます。

1. 基本原則

CSS では、y 軸に沿って回転する反転効果は、transform 属性のrotateY によって実現されます。 rotateY の値の範囲は 0 ～ 360 度で、rotateY の値が 180 度の場合、要素は y 軸の中央に沿って反転し、裏側が表示されます。この時点で、backface-visibility 属性を使用して、要素の裏側を表示するかどうかを制御できます。 backface-visibility の値が非表示の場合、反転した裏面は表示されません。

2. 基本的な実装方法

1. CSS3 のtransform属性を使用する

CSS3のtransform属性を使用すると、要素の反転効果を実現できます。具体的な実装コードは次のとおりです。

/* 设置元素的旋转效果 */

transform: rotateY(180deg); 

/* 隐藏元素的背面 */

backface-visibility: hidden;

上記のコードを使用すると、現在の要素を y 軸に沿って 180 度反転でき、backface-visibility:hidden で要素の背面を非表示にできます。

2. マウス ホバー イベントの定義

マウス ホバー時の要素の反転効果をユーザーが認識できるようにするために、マウス ホバー イベントを定義し、対応する反転アクションを実行できます。具体的な実装コードは次のとおりです。

/* 定义鼠标悬浮事件 */

.element:hover{

/* 悬浮时元素向后翻转 */

transform: rotateY(180deg);

/* 隐藏背面 */

backface-visibility: hidden;

}

上記のコードを使用すると、ユーザーが要素の上にマウスを置くと、要素は y 軸に沿って 180 度反転され、裏側が非表示になります。

3. アニメーションと組み合わせてよりスムーズな効果を実現

よりスムーズで鮮やかなフリップ切り替え効果を実現するには、CSS3 でアニメーションと組み合わせることができます。具体的な実装コードは次のとおりです。

/* 定义旋转动画 */

@keyframes rotate{

/* 开始状态 */

  0%{

    transform: rotateY(0);

  }

/* 结束状态 */

  100%{

    transform: rotateY(180deg);

  }

}

/* 设置元素实现动画 */

.element{

  animation: rotate 1s forwards;

}

/* 隐藏背面 */

.backface{

  visibility: hidden;

}

上記のコードを使用して回転アニメーションを設定します。アニメーションは開始状態 (0%) から終了状態 (100%) に進みます。要素は y に沿って 180 度反転します。軸; 同時に、アニメーション属性を通じてアニメーションが要素に適用されます。さらに、.backface は要素の背面領域を表し、visibility: hidden を設定することで非表示になります。

3. まとめ

この記事では、transform 属性と backface-visibility 属性を使用して要素の反転効果を実現し、アニメーションを組み合わせた CSS 反転切り替えの基本原理と実装方法を紹介します。鮮やかな反転を実現します。アニメーションを切り替えます。この記事が、3D 効果を実現するための CSS3 を理解するのに役立つことを願っています。

以上がCSS反転トグルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。