ホームページ >ウェブフロントエンド >CSSチュートリアル >css3 を使用して 3D フロップ効果を実現する方法 (完全なコードが添付されています)
css3 を使用して 3D フロップ効果を実現する方法 (完全なコードが添付されています)
- 坏嘻嘻オリジナル
- 2018-09-27 10:03:473803ブラウズ
最近、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">
$('.div1').click(() => {
$('.div1').addClass('div2')
})
</script>#効果は写真の通りです
#
以上がcss3 を使用して 3D フロップ効果を実現する方法 (完全なコードが添付されています)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。