如何在点击时翻转图像？ [英] How to flip images on click?
本文介绍了如何在点击时翻转图像？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在点击时在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>
推荐答案
（。cont）。click（function（）{
(".cont").click(function(){
（this）.toggleClass（rotator）;
}）
< / script >
< style 类型 = text / css >
.info，.image {
position：absolute;
-webkit-transition：-webkit-transform 1s，z-index 0s 0.25s;
}
.info {padding：10px;
宽度：160px;
身高：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 {
宽度：160px;
身高：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 >
< span class =code-keyword>< div class = info > < img class = image < span class =code-attribute> src = image.png > < / div >
< / div >
< / body >
< / html >
(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>
您可以尝试这样的事情：
HTML：
You can try something like this:
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;
}
这篇关于如何在点击时翻转图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
