前端开发 图片3D翻转效果
摘要：app开发要前端和后端|web前端开发与美工有什么区别|前端开发要用什么书籍? html 代码 <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> ……
app开发要前端和后端|web前端开发与美工有什么区别|前端开发要用什么书籍?
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.front,
.back {
/*backface-visibility: hidden;*/
position: absolute;
top: 0;
left: 0;
width: 146px;
height: 200px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/*.flip-container {
perspective: 1000;
}*/
.flip-container:hover .flipper {
transform: rotateY(180deg);
}
/*不加
.back {
transform: rotateY(180deg);
}属于自己翻转，加上以后属于两张图片翻转*/
.back {
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 146px;
height: 200px;
}
img {
width: 146px;
height: 200px;
}
</style>
</head>
<body>
<div class=”flip-container”>
<div class=”flipper”>
<div class=”front”>
<!– 前面内容 –>
<img src=”https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534589363&di=1e888dac06efbd6af9f759ecfa643f3a&imgtype=jpg&er=1&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F2fdda3cc7cd98d10261a710a2a3fb80e7bec903a.jpg”>
</div>
<div class=”back”>
<!– 背面内容 –>
<img src=”https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533994698143&di=4b22e043e18e1b155775dbcd0489e509&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01796d5655681b6ac7251c942f64eb.jpg”>
</div>
</div>
</div>
</body>
</html>
app前端开发主要做什么|公众号前端用什么开发|公众号前端用什么开发
» 本文来自：前端开发者 » 《前端开发 图片3D翻转效果》
» 本文链接地址：https://www.rokub.com/5189.html
» 您也可以订阅本站：https://www.rokub.com
近期评论