HTML中点击图片翻转文字

最新推荐文章于 2023-12-04 18:04:17 发布

kingch_csdn

最新推荐文章于 2023-12-04 18:04:17 发布

阅读量4.2k

点赞数 1

分类专栏： HTML 文章标签： HTML 翻转

本文链接：https://blog.csdn.net/qq_22235949/article/details/72288230

版权

HTML 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.7.1.js'></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>
<script type='text/javascript'>
$(window).load(function(){
    $(".cont").click(function(){
       $(this).toggleClass("rotator")  ; 
    })
});
</script>
</head>
<body>
  <div class="cont">
    <img class="image"
      src=<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.7.1.js'></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>
<script type='text/javascript'>
$(window).load(function(){
    $(".cont").click(function(){
       $(this).toggleClass("rotator")  ; 
    })
});
</script>
</head>
<body>
  <div class="cont">
    <img class="image"
      src="http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E6%90%9E%E7%AC%91%E5%9B%BE%E7%89%87&step_word=&hs=0&pn=0&spn=0&di=188735733010&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=-1&cs=4288736241%2C1007588047&os=2757452537%2C4175728003&simid=3447087890%2C364510106&adpicid=0&lpn=0&ln=1955&fr=&fmq=1494919720044_R&fm=rs1&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=%E5%9B%BE%E7%89%87&objurl=http%3A%2F%2Fpicture.ik123.com%2Fuploads%2Fallimg%2F160929%2F12-160929161S1.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fw_z%26e3Bth8dn_z%26e3Bv54AzdH3FqAzdH3Fqq6tzitAzdH3F2w5xtw5AzdH3Fc8amb_z%26e3Bip4s&gsm=0&rpstart=0&rpnum=0">
    <div class="info">Click here to flip</div>
  </div>
</body>
</html>">
    <div class="info">点击翻转</div>
  </div>
</body>
</html>