css3 を使用して 3D フロップ効果を実現する方法 (完全なコードが添付されています)

坏嘻嘻
リリース: 2018-09-27 10:03:47
オリジナル
3638 人が閲覧しました

最近、CSS3 について勉強しています。これは、以前の画像で表現されたパターンや形状を置き換えるだけでなく、特殊効果を作成することもできる、非常に実用的でクールなテクノロジであると実感しています。たとえば、影効果、グラデーション効果などがありますが、その中でも 3D 変換効果は特にクールです。この記事の内容は、css3 を使用して 3D カード反転効果を実現する方法についてです。必要な方は参考にしていただければ幸いです。

css3 を使用して 3D 反転効果を実現する原理

いわゆる反転効果とは、画像を y 軸に沿って反転することです。 。 効果。

まず、最初に設定されている同じサイズの div が 1 つだけではなく 2 つあることを明確にする必要があります。次に、2 つの div をオーバーラップし、position:absolute ステートメントを使用して上下に配置された div をオーバーラップする必要があります。

次に、最初の div を y 軸に沿って回転する必要があります。ここでは、transform:rotageY (-180deg) ステートメントを使用して、これを実現します。同時に、2 つの div を区別する必要があります。片方を180度回転させると、もう片方も0度回転します。

最後に、180 度回転した div の回転が完了したら、それを非表示にし、backface-visibility: hidden; ステートメントを使用して、画像が見えない場所に移動すると消える機能を実現します。ディスプレイ。

ps: 上記の内容について不明な点がある場合は、このサイトの関連記事を確認してください。

css3 を使用して円形回転アニメーションを作成する方法 (完全なコードが添付されています)

css3 を使用して 3D を実現するためのコードフリップエフェクト

#
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>PHP中文网</title>
<script src="http://7xiyzi.com2.z0.glb.qiniucdn.com/20160409_weixinjquery-2.1.0.min.js?i=6" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="div1">
<div class="div2">
<img  src="http://static.wesai.com/files/upload/9/bd9/feeae/9bd9dfeeaee3b9be37a3ad4e75fe7004.jpg" alt="css3 を使用して 3D フロップ効果を実現する方法 (完全なコードが添付されています)" >
</div>
</div>
</body>
</html>
<style>
.div1 {
width: 185px;
height: 251px;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 400ms linear;
transition: all 400ms linear;
}
.div1.div2 {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
backface-visibility:hidden;
}
img {
width: 185px;
height: 251px;
}
</style>
<script type="text/javascript">
$(&#39;.div1&#39;).click(() => {
$(&#39;.div1&#39;).addClass(&#39;div2&#39;)
})
</script>
ログイン後にコピー

#効果は写真の通りです

css3 を使用して 3D フロップ効果を実現する方法 (完全なコードが添付されています)css3 を使用して 3D フロップ効果を実現する方法 (完全なコードが添付されています)#

以上がcss3 を使用して 3D フロップ効果を実現する方法 (完全なコードが添付されています)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート