Home >Web Front-end >HTML Tutorial >CSS image flip example_html/css_WEB-ITnose
CSS image flip example_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 11:42:571007browse
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"/><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="width: 100%;height: 100%;"/> </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> 来自4eb2b9bfd5aa96b6c1b8a4cefad013e2
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：An article teaches you basic HTML_html/css_WEB-ITnoseNext article：An article teaches you basic HTML_html/css_WEB-ITnose