Maison > Article > interface Web > CSS图片翻转例子_html/css_WEB-ITnose
CSS图片翻转例子_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:42:57955parcourir
dfdfdfdfdf
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* entire container, keeps perspective */ /** * 【perspective: number|none;】 * 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。 * 当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。 */ .flip-container {perspective: 1000;} /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper {transform: rotateY(180deg);} .flip-container, .front, .back {width: 320px;height: 480px;} /* flip speed goes here */ /** * 【transition: property duration timing-function delay;】 * 过渡动画 （transition: width 2s;） * transition-property：规定设置过渡效果的 CSS 属性的名称。（width） * transition-duration：规定完成过渡效果需要多少秒或毫秒。（2s） * transition-timing-function：规定速度效果的速度曲线。（ease-in-out） * transition-delay：延迟时间，以秒或毫秒计。 */ /** * 【transform-style: flat|preserve-3d;】 * 使被转换的子元素保留其 3D 转换 * flat：子元素将不保留其 3D 位置。 * preserve-3d：子元素将保留其 3D 位置。 */ .flipper {transition: 0.6s;transform-style: preserve-3d;position: relative;} /* hide back of pane during swap */ /** * 【backface-visibility: visible|hidden;】 * 定义当元素背面是否可见。 */ .front, .back {backface-visibility: hidden;position: absolute;top: 0;left: 0;} /* front pane, placed above back */ .front {z-index: 2;} /* back, initially hidden pane */ .back {transform: rotateY(180deg);} </style> </head> <body> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <!-- 前面内容 --> <a href="http://www.webhek.com/css-flip/"> <img src="http://www.webhek.com/wordpress/wp-content/uploads/2014/03/hacker.jpg"/ alt="CSS图片翻转例子_html/css_WEB-ITnose" ><br /> </a> </div> <div class="back"> <!-- 背面内容 --> <a href="http://www.webhek.com/css-flip/"> <img src="http://www.webhek.com/wordpress/wp-content/uploads/2014/03/hack-logo.jpg" style="max-width:90%"/ alt="CSS图片翻转例子_html/css_WEB-ITnose" > </a> </div> </div> </div> <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> </script> </body></html> 来自
Déclaration：
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
Article précédent：一篇文章教你学会基础的HTML_html/css_WEB-ITnoseArticle suivant：CSS+DIV布局应用_html/css_WEB-ITnose