Heim > Artikel > Web-Frontend > So erzielen Sie einen HTML-Flip-Effekt
So erzielen Sie einen HTML-Flip-Effekt
- 藏色散人Original
- 2021-06-03 11:11:285734Durchsuche
So implementieren Sie den HTML-Flip-Effekt: Überlagern Sie zunächst die beiden anzuzeigenden Bilder mithilfe der Positionierung und verwenden Sie dann die Perspektive von CSS3 in Kombination mit dem Attribut „transform:rateY()“, um den Flip-Effekt zu erzielen.
Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.
CSS3 erzielt einen wunderschönen Kartenumdrehungseffekt
Veröffentlichen Sie zuerst das Rendering (der tatsächliche Effekt ist 1000-mal glatter als das GIF-Bild, Sie können es gerne verwenden): 
Verwendet hauptsächlich das Perspektive von CSS3 Kombiniert mit dem Attribut transform:ratateY(). Wenn Sie das Perspektive-Attribut für ein Element definieren, erhalten seine untergeordneten Elemente den Perspektiveneffekt, nicht das Element selbst. perspective结合transform:ratateY()属性完成。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。需要注意的是：perspective 属性只影响 3D 转换元素。
这个属性现在在火狐谷歌safari上都得到了较好的支持，W3C.cn上关于该属性的说明还未及时更新。
实现思路就是将两个要展示的p利用定位重叠在一起，其中一个首先围绕Y轴旋转一定角度，还要加上一个关键属性backface-visibility:hiddenEs ist zu beachten
, dass das Perspektive-Attribut nur 3D-Transformationselemente betrifft. 
Dieses Attribut wird jetzt in Firefox und Google Safari gut unterstützt. Die Beschreibung dieses Attributs auf W3C.cn wurde nicht rechtzeitig aktualisiert.
backface-visibility:hidden (dieses Attribut Definiert, ob das Element sichtbar ist, wenn es nicht auf den Bildschirm zeigt. Wenn Sie dieses Attribut nicht hinzufügen, wird immer nur eine Karte angezeigt. Die Auswirkung eines Fehlers ist wie folgt: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>CSS3实现卡片翻转效果</title>
<style>
.re-item {
width: 220px;
margin: 50px auto;
height: 276px;
cursor: pointer;
position: relative;
perspective: 500;
-webkit-perspective: 500;
}
.re-item img {
max-width: 220px;
}
.re-item-front,
.re-item-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
-webkit-perspective: 1000;
/*backface-visibility: hidden;*/
-webkit-transition: all 1.5s;
-moz-transition: all 1.5s;
-ms-transition: all 1.5s;
-o-transition: all 1.5s;
box-shadow: rgba(50, 50, 50, 0.2) 0 0 15px;
overflow: hidden;
}
.re-item-back {
position: relative;
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
}
.re-item:hover .re-item-front {
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
}
.re-item:hover .re-item-back {
transform: rotateY(-360deg);
-webkit-transform: rotateY(-360deg);
}
.re-box .re-item dd {
text-align: center;
font-family: "微软雅黑";
}
.re-item .re-item-job {
margin: 2px 0;
font-size: 18px;
color: #303030;
line-height: 40px;
}
.re-item .re-item-des {
padding: 0 12px;
font-size: 14px;
color: #939393;
}
</style>
</head>
<body>
<div class="re-box">
<div class="re-item">
<dl class="re-item-front">
<dt><img src="img/c2.jpg" / alt="coser"></dt>
<dd class="re-item-job">coser</dd>
<dd class="re-item-des">成为我们的合作coser，漫展返图，自由扩列，以及无偿拍摄&后期服务</dd>
</dl>
<div class="re-item-back">
<img src="img/c2_1.jpg" alt="苏苏" />
<button type="button" class="join_btn open_modal" data-id="2">立即加入</button>
</div>
</div>
</div>
</body>
</html>Schauen Sie sich die HTML-Struktur genau an werden nicht benötigt Ja, die kritischste Struktur ist wie folgt. Sie können das CSS auch löschen.
<p class="re-item">
<p class="re-item-front"></p>
<p class="re-item-back"></p>
</p>Mein Implementierungscode ist genau so. Ich habe ihn direkt gepostet, weil ich zu faul bin, ihn zu löschen.
【Empfohlenes Lernen: HTML-Video-Tutorial🎜】🎜🎜🎜Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen HTML-Flip-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!