Maison > interface Web > tutoriel HTML > 在CSS3中图片3D翻转效果是这样做到的_html/css_WEB-ITnose

在CSS3中图片3D翻转效果是这样做到的_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:57:09
original
1192 Les gens l'ont consulté

今天,带来的是纯CSS3的效果--图片3D翻转。

  请看效果:http://webfront.verynet.cc/pc/rotate.html

  这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animation属性,而是采用transition过渡属性。这个属性会将元素在两种效果之间进行切换,并产生一个过渡效果。详情请看代码。

  HTML结构:

 1     <div id="content"> 2         <div class="list"> 3             <img  src="../Images/1.jpg" alt="在CSS3中图片3D翻转效果是这样做到的_html/css_WEB-ITnose" > 4             <div class="text"> 5                 这是小狗哦!! 6             </div> 7         </div> 8         <div class="list"> 9             <img  src="../Images/2.jpg" alt="在CSS3中图片3D翻转效果是这样做到的_html/css_WEB-ITnose" >10             <div class="text">11                 这是小狗哦!!12             </div>13         </div>14     </div>
Copier après la connexion

  CSS样式:

 1 <style type="text/css"> 2         *{margin:0px;padding:0px;} 3         #content{ 4             width:500px; 5             margin:30px auto; 6         } 7         .list{ 8             width:200px; 9             margin:25px;10             float:left;11             position:relative;12         }13         .list img{14             width:200px;15             height:200px;16             transform:perspective(200px) rotateY(0deg);17             opacity:1;18             transition:transform 600ms ease,opacity 600ms ease;19             -webkit-transition:transform 600ms ease,opacity 600ms ease;20         }21         .text{22             height:200px;23             width:200px;24             line-height:200px;25             background:#000;26             color:#fff;27             opacity:0;28             position:absolute;29             text-align:center;30             font-weight:bold;31             top:0px;32             left:0px;33             transform:perspective(200px) rotateY(-180deg);34             transition:transform 600ms ease,opacity 600ms ease;35             -webkit-transition:transform 600ms ease,opacity 600ms ease;36         }37         .list:hover img{38             transform:perspective(200px) rotateY(180deg);39             opacity:0;40             transition:transform 600ms ease,opacity 600ms ease;41             -webkit-transition:transform 600ms ease,opacity 600ms ease;42         }43         .list:hover .text{44             transform:perspective(200px) rotateY(0deg);45             opacity:1;46             transition:transform 600ms ease,opacity 600ms ease;47             -webkit-transition:transform 600ms ease,opacity 600ms ease;48         }49     </style>
Copier après la connexion

  代码很容易理解,先为图片设置一个初始旋转角度,因为它是先展示的,所以角度为180deg,透明度为1。当鼠标滑过时,改变角度和透明度,使其翻转。而背后的文字也是如此道理。

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal