Heim > Artikel > Web-Frontend > css3 翻牌_html/css_WEB-ITnose
css3 翻牌_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:48:54925Durchsuche
<!doctype html><html><head><meta charset="utf-8"><title>css3 翻牌</title></head><body><style>*{ margin:0; padding:0;}ul,li{ list-style:none; margin:0; padding:0;}.brandsShow{ width:1200px; height:620px; margin:0 auto; }.brandsShow ul{ margin-left:-20px; width:1225px; height:auto; }.brandsShow ul li{ float:left; display:inline; margin-left:20px; margin-bottom:20px; width:283px; height:283px; }.flip-container {perspective: 1000;-webkit-perspective: 1000px; -moz-perspective: 1000px;-ms-perspective: 1000px; -o-perspective: 1000px; perspective: 1000px;margin:0px auto; float:left; border:1px solid #fff;}.flip-container:hover .back {transform: rotateY(0deg); -webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg); z-index:2;}.flip-container:hover .front { transform: rotateY(180deg);-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-ms-transform: rotateY(180deg);-o-transform: rotateY(180deg); z-index:1}.flip-container, .front, .back {width: 283px;height: 283px;}.flipper {transition:transform 0.6s ease-out;transition: transform .5s ease-in-out;-webkit-transition: transform .5s ease-in-out;-moz-transition: transform .5s ease-in-out;-ms-transition: transform .5s ease-in-out;-o-transition: transform .5s ease-in-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d; display:block;position: relative;}.front, .back {backface-visibility: hidden;transition: 0.6s ease-out;-webkit-transition: .6s ease-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d;position: absolute;top: 0;left: 0;}.front img, .back img{ width:283px; height:283px; overflow:hidden;}.front {z-index: 2;transform: rotateY(0deg);transform: rotateY(0deg); -webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);}.back { z-index:1;transform: rotateY(-180deg);transform: rotateY(-180deg);-webkit-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg);-ms-transform: rotateY(-180deg);-o-transform: rotateY(-180deg);}.brandship{ font-size:48px; color:#fff; width:auto; height:283px; line-height:283px; text-align:center; margin:0 auto; font-weight:bold;}.brandship:hover{ cursor:pointer;}</style> <ul> <li class="flip-container " ontouchstart="this.classList.toggle('hover');"> <a href="brandLi.html" class="flipper"> <div class="front "><img src="images/pic/brand10.jpg" alt="css3 翻牌_html/css_WEB-ITnose" >前面</div> <div class="back " ><img src="images/pic/brand01.jpg" alt="css3 翻牌_html/css_WEB-ITnose" >后面</div> </a> </li> <li class="flip-container " ontouchstart="this.classList.toggle('hover');"> <a href="brandLi.html" class="flipper"> <div class="front "><img src="images/pic/brand10.jpg" alt="css3 翻牌_html/css_WEB-ITnose" ></div> <div class="back " ><img src="images/pic/brand01.jpg" alt="css3 翻牌_html/css_WEB-ITnose" ></div> </a> </li> </ul></body></html>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Css布局系列-上下两栏应用场景_html/css_WEB-ITnoseNächster Artikel：HTML 5 简介_html/css_WEB-ITnose