css+js实现图片反转效果

来源：互联网发布：java list 取第一个编辑：程序博客网时间：2024/05/16 12:31

一个图片，点击图片图片反转180deg后，出现图片的简介

html部分

<div class="container"><div class="photo-wrap photo-front"><div class="side side-front"><img src="img/banner.jpg"></div><div class="side side-back"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem aliquid laboriosam a ipsam ducimus ea nobis officiis dignissimos consequuntur asperiores fuga illum saepe rem eius ipsa vel, atque eos optio?</p></div></div></div>

css部分

* {margin: 0;padding: 0;font-family: 'microsoft yahei';}.container {width: 220px;height: 280px;margin: 0 auto;margin-top: 50px;}.photo-wrap,.side {width: 100%;height: 100%;}.photo-wrap {transform-style: preserve-3d;transition: all .3s;position: relative;}.photo-wrap.photo-front {transform: rotateY(0deg);}.photo-wrap.photo-back {transform: rotateY(180deg);}.side {position: absolute;top: 0;left: 0;}.side img{width: 100%;height: 100%;backface-visibility:hidden;}.side-front {transform: rotateY(0deg);}.side-back {background-color: #fff;box-sizing: border-box;border: 5px solid #000;padding: 5px;transform: rotateY(180deg);}

js部分

var photo_wrap = document.querySelector('.photo-wrap');photo_wrap.onclick = function() {var str = this.className;if(/photo-front/.test(str)) {this.className = str.replace(/photo-front/,'photo-back');} else if(/photo-back/.test(str)) {this.className = str.replace(/photo-back/,'photo-front');}}

就这些吧

0 0