I have div that when hovered flips over, rotates3d 180 degrees.
Its all working well. But I want it so that instead of flipping when hovered, I want to be able to call the event in javascript, so for example the div flips on page load.
here is the css for the hover..
#flipDiv:hover .flipDivIn {
-webkit-transform: rotate3d(0, 1, 0, 180deg);
-moz-transform: rotate3d(0, 1, 0, 180deg);
transform: rotate3d(0, 1, 0, 180deg);
}
Here is an approach with a fiddle, I added a transition effect to your flip code for fun:
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);
}
You can define a CSS class which rotates an element, and dynamically add/remove this class with JavaScript. For example:
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>Note that if you are using jQuery, the JS code above can be vastly simplified:
var $btn = $('#btn'),
$div = $('#div');
$btn.on('click', function () {
$div.toggleClass('flip');
});
Here it is on page load 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);
}
There are two ways to do that:
Option 1. CSS + JS
CSS (class not to be applied beforehand)
.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';
});
Option 2. JS only
document.getElementById('#flipDiv').addEventListener(event,function(e){
var tS = e.currentTarget.style;
tS.WebkitTransform = tS.MozTransform = tS.transform = 'rotate3d(0, 1, 0, 180deg)';
});
The keyword event will be replaced by the event of your choice (e.g. 'click').
If you want to use an event on another tag, than use this:
anyElement.addEventListener(event,function(){
var tS = document.getElementById('#flipDiv').style;
tS.WebkitTransform = tS.MozTransform = tS.transform = 'rotate3d(0, 1, 0, 180deg)';
});
