Question

我有div，当徘徊翻转时，旋转360度。

一切运转良好。但我想要它，以便在盘旋时不要翻转，我希望能够在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

您可以定义一个旋转元素的CSS类，并使用JavaScript动态添加/删除此类。例如：

var div = document.getElementById('div');
var btn = document.getElementById('button');
var re = /\bflip\b/g;

// you can add this listener to any DOM event
function flip() {

  // if element has class "flip"
  if (re.test(div.className)) {

    // remove class "flip"
    div.className = div.className.replace(re, '');
  } else {

    // otherwise add class "flip"
    div.className += ' flip';
  }
}

// for demo purposes, flip on button click
btn.addEventListener('click', flip, false);

#div {
  width: 100px;
  height: 100px;
  background: lightgray;

  /* optionally, add a transition in order to animate the flip */
  -webkit-transition: -webkit-transform 1s ease-in-out;
  -moz-transition: -moz-transform 1s ease-in-out;
  transition: transform 1s ease-in-out;
}
.flip {
  -webkit-transform: rotate3d(0, 1, 0, 180deg);
  -moz-transform: rotate3d(0, 1, 0, 180deg);
  transform: rotate3d(0, 1, 0, 180deg);
}

<div id="div">Hello!</div>
<button id="button">Flip!</button>

请注意，如果您使用的是jQuery，那么上面的JS代码可以大大简化：

var $btn = $('#btn'),
    $div = $('#div');
$btn.on('click', function () {
    $div.toggleClass('flip');
});

Answer 2

这是一个小提琴的方法，我为你的翻转代码添加了过渡效果以获得乐趣：

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

Answer 3

这是页面加载https://jsfiddle.net/DIRTY_SMITH/dzx37chb/

HTML

<body onload="rotate()">


<div id="someDiv">
<h1>blah blah blah</h1>
</div>
</body>
<script>
function rotate(){
document.getElementById("someDiv").className = "flipDivIn";
}
</script>

CSS

div{background-color: blue;}
.flipDivIn {
  -webkit-transform: rotate3d(0, 1, 0, 180deg);
  -moz-transform: rotate3d(0, 1, 0, 180deg);
  transform: rotate3d(0, 1, 0, 180deg);
}

Answer 4

有两种方法可以做到：

选项1. CSS + JS

CSS（不预先应用的课程）

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

<强> JS

document.getElementById('#flipDiv').addEventListener(event,function(e){
   e.currentTarget.className += 'flipDivIn';
});

选项2.仅限JS

document.getElementById('#flipDiv').addEventListener(event,function(e){
   var tS = e.currentTarget.style;
   tS.WebkitTransform = tS.MozTransform = tS.transform = 'rotate3d(0, 1, 0, 180deg)';
});

关键字event将替换为您选择的事件（例如'click'）。

如果您想在另一个标签上使用某个事件，请使用以下内容：

anyElement.addEventListener(event,function(){
   var tS = document.getElementById('#flipDiv').style;
   tS.WebkitTransform = tS.MozTransform = tS.transform = 'rotate3d(0, 1, 0, 180deg)';
});

悬停事件更改为javascript函数

4 个答案: