javascript - 悬停事件更改为 javascript 函数

Question

我有一个 div，当悬停时翻转，旋转 3d 180 度。

一切正常。但我想要它，而不是在悬停时翻转，我希望能够在 javascript 中调用事件，例如 div 在页面加载时翻转。

这是悬停的 css..

#flipDiv:hover .flipDivIn {
  -webkit-transform: rotate3d(0, 1, 0, 180deg);
  -moz-transform: rotate3d(0, 1, 0, 180deg);
  transform: rotate3d(0, 1, 0, 180deg);
}

Answer 1

这是一种使用 fiddle 的方法，为了好玩，我在您的翻转代码中添加了过渡效果:

https://jsfiddle.net/edencorbin/sLz15ves/

html:

    <div id="flipdiv">
    <img id="flipdiv" src="http://placehold.it/350x150">
    </div>

JavaScript

    $( document ).ready(function() {
    flipDiv();

    function flipDiv() {
      $('#flipdiv').addClass('flipDivIn');
    };
    });

CSS

    .flipDivIn {
      -webkit-transition: 1s ease-in-out;
      -moz-transition: 1s ease-in-out;
      -o-transition: 1s ease-in-out;
      transition: 1s ease-in-out;
      -webkit-transform: rotate3d(0, 1, 0, 180deg);
      -moz-transform: rotate3d(0, 1, 0, 180deg);
      transform: rotate3d(0, 1, 0, 180deg);
    }