Verwenden Sie CSS3, um Bildspiegelungseffekte zu erstellen-CSS-Tutorial-php.cn

Verwenden Sie CSS3, um Bildspiegelungseffekte zu erstellen

Y2J

Freigeben： 2017-05-24 10:00:43

Original

2166 Leute haben es durchsucht

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>

Nach dem Login kopieren

[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!