CSS图片翻转例子_html/css_WEB-ITnose-html tutorial-php.cn

CSS图片翻转例子_html/css_WEB-ITnose
WBOY
Lepaskan： 2016-06-24 11:42:57
asal
956 orang telah melayarinya
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>
Salin selepas log masuk
来自