巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+都会分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
建站专提News

操纵纯css完成图片翻转的成果

一佰互联网站开辟设想(www.taishanly.com) 宣布日期 2020-04-21 17:23:35 阅读数: 144

完成成果图以下

间接上代码吧

1, body局部复制代码代码以下:
<body>
<div class="container">
<div class="wrap">
<div class="image">
<div class="display front">
<img src="image/img1.jpg" alt="" />
</div>
<div class="display back">
<h3>灰白的爱车</h3>
</div>
</div>
</div>
<div class="wrap">
<div class="image">
<div class="display front">
<img src="image/img2.jpg" alt="" />
</div>
<div class="display back">
<h3>吉他boy</h3>
</div>
</div>
</div>
<div class="wrap">
<div class="image">
<div class="display front">
<img src="image/img3.jpg" alt="" />
</div>
<div class="display back">
<h3>姣美的horse</h3>
</div>
</div>
</div>
</div>
</body>

2, style局部复制代码代码以下:
<style media="screen">
* {
padding: 0;
margin: 0;
}
body {
background-color: rgb(244, 244, 244);
}
.container {
width: 1000px;
margin: auto;
margin-top: 3em;
clear: left;
}
.wrap {
-webkit-perspective:400;
-moz-perspective:400;
float: left;
width: 220px;
margin-right: 20px;
}
.image {
width: 100%;
height: 200px;
-webkit-transform-style:preserve-3d;
-webkit-transition:1.5s;
-moz-transform-style:preserve-3d;
-moz-transition:1.5s;
}
img {
width: 220px;
height: 200px;
}
.wrap:hover .image {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
}
.display {
position: absolute;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
}
.display 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(#db5726));
background: -moz-linear-gradient(top,#fdbb5a,#db5726);
width: 220px;
height: 200px;
line-height: 200px;
}
</style>

总结
以上便是这篇文章的全数内容了,但愿本文的内容对大师的进修或任务能有所赞助,若是有疑难大师能够或许留言交换。

一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。更多资讯:tags标签

相干消息more

12
05月
专业网站扶植糊口更进一步

提及收集,咱们都晓得收集给咱们的糊口带来了许很多多的便利给咱们的糊口带来了很大的便利和好处地点。对收集网站来讲,在给咱们供给着咱们需要的大... >>概况

20
04月
HTML5 拖放功效完成代码

在HTML5中,拖放是规范的一局部,任何元素都能够或许拖放,详细内容以下1、拖放XML/HTML Code复制内容到剪贴板 <!DO... >>概况

17
04月
轻信WiFi暗码破解软件 蹭网不胜利话费反被

本想操纵WiFi暗码破解软件来蹭网,成果网没蹭到还被偷了话费。专家提醒不要轻信所谓的“蹭网软件”,以避免传染木马形成损... >>概况

01
05月
PHP 5.0工具模子深度摸索之类的静态成员

静态属性包罗在类中要封装的数据,能够或许由一切类的实例同享。现实上,除属于一个牢固的类并限定拜候体例外,类的静态属性很是近似于函数的全局变量。... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站