css3 を使用して 3D フロップ効果を実現する方法 (完全なコードが添付されています)-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

坏嘻嘻

Sep 27, 2018 am 10:03 AM

css3

最近、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="/static/imghwm/default1.png"  data-src="http://static.wesai.com/files/upload/9/bd9/feeae/9bd9dfeeaee3b9be37a3ad4e75fe7004.jpg"  class="lazy"   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 フロップ効果を実現する方法 (完全なコードが添付されています) #