CSS图片翻转例子_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:42:57976검색
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> 来自
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.