CSS实现LOL皮肤简单3D翻牌效果

效果预览

HTML

<body background=800.jpg style=background-repeat:no-repeat;background-size:100% 100%;>
<audio  autoplay loop="loop"><source src="冰雪节.mp3">
</audio><!-- 代码部分begin -->
<div class="contentbox"><div class="qcontainer"><div class="film"><div class="face front"><img src="data:images/1.jpg"></div><div class="face back" id='do'><img src="data:images/01.jpg" ></div></div></div><div class="qcontainer"><div class="film"><div class="face front"><img src="data:images/2.jpg"></div><div class="face back" id='do'><img src="data:images/02.jpg" ></div></div></div><div class="qcontainer"><div class="film"><div class="face front"><img src="data:images/3.jpg"></div><div class="face back" id='do'><img src="data:images/03.jpg" ></div></div></div><div class="qcontainer"><div class="film"><div class="face front"><img src="data:images/4.jpg"></div><div class="face back" id='do'><img src="data:images/04.jpg" ></div></div></div><div class="qcontainer"><div class="film"><div class="face front"><img src="data:images/5.jpg"></div><div class="face back" id='do'><img src="data:images/05.jpg" ></div></div></div></div>
<!-- 代码部分end --></body>
</html>

CSS

li{list-style:none;}
ul{margin:0;padding:0;}
.contentbox{width:1300px;margin:auto;margin-top:2em;clear:left;}
.qcontainer{-webkit-perspective:400;-moz-perspective:400;float:left;width:220px;margin-right:20px;}
.film{width:100%;height:300px;-webkit-transform-style:preserve-3d;-webkit-transition:1.5s;-moz-transform-style:preserve-3d;-moz-transition:1.5s;}
.qcontainer:hover .film{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);}
.face{position:absolute;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;}
.face h3{color:white;text-align:center;}
.back{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);background:-webkit-gradient(linear,left top,left bottom,from(#fdbb5a),to(yellow));background:-moz-linear-gradient(top,#fdbb5a,#db5726);width:300px;height:555px;}
.foot{text-align:center;color:#fff;position:fixed;bottom:20px;left:50%;margin-left:-126px;font-size:12px;font-family:"微软雅黑"；}
#do{display:inline-block;width:100%;height:100%;width:300px;height:555px;}
#do img{width:100%;height:100%;}

CSS实现LOL皮肤简单3D翻牌效果相关推荐

HTML5 CSS3专题诱人的实例 CSS3打造百度贴吧的3D翻牌效果
首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果.就是鼠标移到元素上,感觉能够看到元素背后的信息. 大家假设制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语, ...
HTML5 CSS3专题诱人的实例 CSS3打造百度贴吧的3D翻牌效果以及图片提交
今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放在使用该实例制作的相册之后都可以 ...
css写的一个简单的幻灯片效果页面
制作幻灯片,第一反应是用css3的Animation,那我就简单介绍一下Animation. CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation. t ...
html3d旋转效果相册,HTML5css3：3D旋转木马效果相册
这篇博客的目的是因为上篇HTML5 CSS3专题诱人的实例 CSS3打造百度贴吧的3D翻牌效果中有个关于CSS 3D效果的比较重要的知识点没讲到,就是perspective和tranlateY 效果 ...
html5 相册翻转效果,HTML5 css3：3D旋转木马效果相册
这篇博客的目的是因为上篇HTML5 CSS3专题诱人的实例 CSS3打造百度贴吧的3D翻牌效果中有个关于CSS 3D效果的比较重要的知识点没讲到,就是perspective和tranlateY 效果 ...
HTML5 CSS3 专题诱人的实例 3D旋转木马效果相册
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...
HTML5 CSS3 专题：诱人的实例 3D旋转木马效果相冊
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...
html文字翻牌效果,css3翻牌效果
原理:通过css3属性-webkit-transform: rotate(0deg)与-webkit-transform: rotate(180deg)对2个元素设置正反面然后通过有过渡(trans ...
html鼠标悬停效果_【开发小技巧】023—如何使用HTML和CSS实现3D文字效果
来源 | https://www.geeksforgeeks.org/create-a-3d-text-effect-using-html-and-css/3D文字效果是网页设计领域中最常用的文字效果 ...
css滤镜使文字变3D效果
为什么80%的码农都做不了架构师?>>> 四夕刚从 OECP社区看到了一篇文章 <css滤镜使文字变3D效果>,Css的确很强大, W3C 公布了样式单( CSS ...

CSS实现LOL皮肤简单3D翻牌效果

效果预览

HTML

CSS

CSS实现LOL皮肤简单3D翻牌效果相关推荐

最新文章

热门文章