Heim > Artikel > Web-Frontend > Verwenden Sie CSS3, um Bildspiegelungseffekte zu erstellen

Verwenden Sie CSS3, um Bildspiegelungseffekte zu erstellen

Y2JOriginal: 2017-05-24 10:00:432080Durchsuche

Dieser Artikel zeigt Ihnen einen Bild--Karten-Flip-Effekt, der mit nativem CSS3 implementiert wurde. Er ist sehr cool, aber der Code ist sehr einfach. Er wird hier Freunden empfohlen, die die gleichen Bedürfnisse haben.

Schauen wir uns zuerst die Effektdemonstration an:

Ist es nicht sehr gut? Lassen Sie mich den Implementierungscode mit Ihnen teilen.

Der Code lautet wie folgt:

<!doctype html>
<html>
<head>
<meta char
set
="utf-8">
<title>css3 翻牌</title>
</head>
<body>
<style>
*{ 
margin
:0; 
padding
:0;}
ul,li{ 
list-style
:none; margin:0; padding:0;}
.brandsShow{ 
width
:1200px; 
height
:620px; margin:0 auto;  }
.brandsShow ul{ 
margin-left
:-20px; width:1225px; height:auto;  }
.brandsShow ul li{ 
float
:left
; 
display
:inline; width:283px; height:283px;  }
.flip-container {perspective: 1000;
-webkit-perspective: 1000px;    /*父类容器中  perspective  子类允许透视*/
 -moz-perspective: 1000px;
 -ms-perspective: 1000px;
  -o-perspective: 1000px;
   perspective: 1000px;
   margin:0px auto; float:left; margin-left:20px; 
margin-bottom
:20px; border:1px solid #fff;}
.flip-container
:hover
 .back {trans
for
m: rotateY(0deg); -webkit-transform: rotateY(0deg);-moz-transform:  rotateY(0deg);-ms-transform:  rotateY(0deg);-o-transform:  rotateY(0deg); 
z-index
:2;}
.flip-container:hover .front { transform: rotateY(180deg);-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-ms-transform:  rotateY(180deg);-o-transform:  rotateY(180deg); z-index:1}
.flip-container, .front, .back {width: 283px;height: 283px;}
.flipper {transition:transform  0.6s ease-out;
transition: transform .5s ease-in-out;
-webkit-transition: transform .5s ease-in-out;
-moz-transition: transform .5s ease-in-out;
-ms-transition: transform .5s ease-in-out;
-o-transition: transform .5s ease-in-out;
-webkit-transform-style: preserve-3d;  /*使其子类变换后得以保留 3d转换后的位置*/
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  display:block;
position
: relative;}
.front, .back {backface-
visibility
: hidden;transition: 0.6s ease-out;-webkit-transition: .6s ease-out; -webkit-transform-style: preserve-3d;  -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d;position: absolute;
top
: 0;left: 0;}
.front img, .back  img{ width:283px; height:283px; 
overflow
:hidden;}
.front {z-index: 2;transform: rotateY(0deg);transform: rotateY(0deg); -webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-ms-transform:  rotateY(0deg);-o-transform:  rotateY(0deg);}
.back { z-index:1;transform: rotateY(-180deg);transform: rotateY(-180deg);-webkit-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg);
-ms-transform:  rotateY(-180deg);-o-transform:  rotateY(-180deg);}
</style>
 <ul>
  <li class="flip-container  " ontouchstart="this.
class
List.toggle(&#39;hover&#39;);">
      <a href="bran
dL
i.html" class="flipper">
      <p class="front "><img  src="images/pic/brand10.jpg">前面</p>
      <p class="back " ><img  src="images/pic/brand01.jpg">后面</p>
      </a>
   </li>
   <li class="flip-container  " ontouchstart="this.classList.toggle(&#39;hover&#39;);">
     <a href="brandLi.html" class="flipper">
    <p class="front "><img  src="images/pic/brand10.jpg"></p>
    <p class="back " ><img  src="images/pic/brand01.jpg"></p>
    </a>
   </li>
  </ul>
</body>
</html>

[Verwandte Empfehlungen]

1 Kostenloses CSS3-Video-Tutorial

2 . Einführung mehrerer neuer Technologien in CSS3

3. Teilen von 22 H5- und CSS3-Hilfetools

4 ist CSS3?

Detaillierte Erläuterung von Beispielen für Selektoren in CSS3

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS3, um Bildspiegelungseffekte zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einführung mehrerer neuer Technologien in CSS3Nächster Artikel：Einführung mehrerer neuer Technologien in CSS3

In Verbindung stehende Artikel

Mehr sehen