用于图像或DIV翻转的纯Javascript [英] Pure Javascript for Image or DIV Flip

问题描述

因为我需要在我的软件中编写html代码，所以我只需要纯JavaScript 来进行过滤。

请没有css动画或jquery动画，只有纯javascript。

需要类似于： http://pingmin-tech.com/flipcardjs

在这里找到了一个解决方案：
DEMO

但它会更好，如果我相似 http://pingmin-tech.com/flipcardjs

解决方案

javascript之前你的html代码。

和这个链接是你问我下面的答案评论：
https://jsfiddle.net/ws7054r2/

  #card {display：block;宽度：50px; height：50px;填充：25px;背景颜色：黑色;白颜色; font-family：'Arial'，sans-serif;}   
 <脚本> var k = 0;函数flip（）{var j = document.getElementById（card）; k + = 180; j.style.transform =rotatey（+ k +deg）; j.style.transitionDuration =0.5s}< / script>< div id =cardonmouseover =flip（）>示例文本< / div>  

As i need to code html in my software so i need only pure javascript for fliping.

Please no css animation or Jquery animation, only pure javascript.

need similar to : http://pingmin-tech.com/flipcardjs

found one solution here : DEMO

but it will be better if i get similar to http://pingmin-tech.com/flipcardjs

解决方案

javascript before your html code.

and this link is the answer your asked me below comments: https://jsfiddle.net/ws7054r2/

#card {
  display: block;
  width: 50px;
  height: 50px;
  padding: 25px;
  background-color: black;
  color: white;
  font-family: 'Arial', sans-serif;
}

<script>
  var k = 0;

  function flip() {
    var j = document.getElementById("card");
    k += 180;
    j.style.transform = "rotatey(" + k + "deg)";
    j.style.transitionDuration = "0.5s"
  }
</script>
<div id="card" onmouseover="flip()">sample text</div>

这篇关于用于图像或DIV翻转的纯Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！