你的位置:首页 > 网页设计

[网页设计]CSS图片翻转例子




 
 
 
 
 
 
 
 
 
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>

来自<http://www.webhek.com/css-flip/>