![1s]( "1s")
本文介绍了如何在点击时翻转图像？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我想在点击时在div中翻转图像。我在div中有一个小图像和一个大图像，当我点击div时两个图像正在翻转。 供参考请查看 ] 这是我的代码I want to flip images in div on click.I have one small image and one large image in div when i click on div two images are flipping.for reference please check]here is my code<html><head><script type="text/javascript" src="j7.js"></script><script type="text/javascript">$(".cont").click(function(){ $(this).toggleClass("rotator") ;})</script><style type="text/css">.info, .image{ position:absolute; -webkit-transition: -webkit-transform 1s , z-index 0s 0.25s;}.info{padding:10px; width: 160px; height: 160px; z-index: -2; -webkit-transform: rotateY(180deg); background-color: rgba(255,255,255,0.8);}.image{ z-index: -1; -webkit-transition: -webkit-transform 1s, z-index 0s 0.25s; -webkit-transform: rotateY(0deg);}.rotator{ width:160px; height: 160px;}.rotator .info{ -webkit-transition: -webkit-transform 1s, z-index 0s 0.25s; z-index: -1; -webkit-transform: rotateY(0deg);}.rotator .image{ -webkit-transform: rotateY(180deg); -webkit-transition: -webkit-transform 1s, z-index 0s 0.25s;; z-index: -2;}</style></head><body><div class="cont"> <img class="image" src="pint.png"> <div class="info"> <img class="image" src="image.png"> </div></div></body></html>推荐答案<div class="f1_container"> <div class="shadow f1_card"> <div class="front face"> <img src="http://media-cdn.tripadvisor.com/media/photo-s/03/48/0b/14/dolphin-view-chalets.jpg" style="height: 281px; width: 450px;" /> </div> <div class="back face center"> <img src="http://media-cdn.tripadvisor.com/media/photo-s/03/48/0b/14/dolphin-view-chalets.jpg" style="height: 281px; width: 450px;" /> </div> </div></div> CSS：CSS:.f1_container { position: relative; margin:10px; width: 450px; height: 281px; z-index : 1; float:left;}.f1_container { -webkit-perspective: 1000; perspective: 1000;}.f1_card { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition: all 1.0s linear; transform-style: preserve-3d; transition: all 1.0s linear;}.f1_container.active .f1_card { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); box-shadow: -5px 5px 5px #aaa;}.face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden;}.face.back { display: block; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); box-sizing: border-box; color: white; text-align: center; background-color: #aaa;} DEMO ：小提琴 [ ^ ] 这篇关于如何在点击时翻转图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！ 08-11 20:58