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

我的div悬停时翻转180度旋转3d。

一切正常。但是我想要它，而不是悬停时翻转，而是希望能够使用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);
}

最佳答案

这是一种摆弄小玩意的方法，我在您的翻转代码中添加了一个过渡效果，以达到有趣的目的：

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);
    }