Home > Article > Web Front-end > CSS图片翻转例子_html/css_WEB-ITnose
CSS图片翻转例子_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:42:57922browse
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> 来自
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：一篇文章教你学会基础的HTML_html/css_WEB-ITnoseNext article：CSS+DIV布局应用_html/css_WEB-ITnose