I have a working slider, and it works perfectly but what I am looking for is different effect of what currently it has, Here is a working JSFiddle Example
On each slide image is zooming out and I am looking for opposite effect, that will zoom-in instead of current effect, but unable to do it.
Code is following
<div id="demo-1" data-zs-src='["https://cdn.img42.com/35f7070a6c188d7e325a8c93db7fec05.jpeg", "https://cdn.img42.com/42d703e80b91ac0d7b412e649f761af5.jpeg", "https://cdn.img42.com/e864ec05541d5f0adbc6b73063d05d5c.jpeg"]' data-zs-overlay="dots">
<div class="demo-inner-content">
<h1><span>Testing</span> . <span>Slider</span></h1>
<p>Testing Slider Test Slideshow Test Slideshow Test Slideshow </p>
</div>
</div>
change the scale factor to desired value in css (here i did to 1.0)
.zs-enabled .zs-slideshow .zs-slides .zs-slide {
background: transparent none no-repeat 50% 50%;
background-size: cover;
position: absolute;
visibility: hidden;
opacity: 0;
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
and change the tween value to desired value (i did to 1.5)
.css( { 'opacity': 1.0, 'transform': 'scale(1.5, 1.5)', 'z-index': 2 } )
updated fiddle example
Related
I have a slider that I've been trying to get working. It's demo was 3 slides, but I am trying to add 4. When I add it in, the 4 item is either
In the back permanently
Under the right-sides image
I'm not quite sure how I can fix this, if there is a way.
To help describe what I'm looking for, imagine the below is my diagram:
[back img]
[left img] [right img]
[front img]
I am trying to make it so it revolves. Currently, you can see the front/left/right images, which is what I need, but you can also see the back image.
I essentially need the back image to be hidden, so whichever image is in that spot, hide it.
Here is the set up in HTML
<div class='p_slider'>
<div class='p_slider__item'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/iwatch1.png'>
</div>
<div class='p_slider__item'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/iwatch2.png'>
</div>
<div class='p_slider__item'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/iwatch3.png'>
</div>
<div class='p_slider__item'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/iwatch3.png'>
</div>
</div>
The positioning in CSS
.p_slider__item:nth-of-type(1) {
-webkit-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6);
left: -200px;
-webkit-filter: blur(2px);
opacity: 0.8;
z-index: 1;
}
.p_slider__item:nth-of-type(2) {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
left: 0px;
z-index: 2;
}
.p_slider__item:nth-of-type(3) {
-webkit-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6);
left: 200px;
z-index: 1;
-webkit-filter: blur(2px);
opacity: 0.8;
}
.p_slider__item:nth-of-type(4) {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
left: 0px;
z-index: 2;
}
I have quite a bit more code invested in this, but to keep it short, I also have this JS Fiddle Link. I know this is pretty custom work so I appreciate all the help I get! Thanks!
What I've Tried
updated fiddle with 4 items all moving here: DEMO
So I now have 4 items in rotation, but the slider wants to do this.
Slide front image to right
Slide left image to center
Slide (new center) img to Left and swap with that left
Slide (new center) to right, Slide Left to center
You can simplify the code for rotating by defining classes like left,right,front and back for the positions respectively and add and remove them to elements based on rotateLeft() or rotateRight() functions.
CSS:
.back
{
-webkit-transform: scale(0.4);
-ms-transform: scale(0.4);
transform: scale(0.4);
left:0px;
z-index: 1;
-webkit-filter: blur(2px);
}
.front
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
left: 0px;
z-index: 3;
}
.left
{
-webkit-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6);
left: -200px;
opacity: 0.8;
z-index: 2;
-webkit-filter: blur(2px);
}
.right
{
-webkit-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6);
left: 200px;
z-index: 2;
-webkit-filter: blur(2px);
opacity: 0.8;
}
JS:
// 3D Slider for Reece
on = 0; // Init
time = 500; // Set the delay before the next click is accepted to 1 second
// Right
$('.right').click(function () {
rotateRight(); // Call
on = 1; // Set delay on
});
// Left
$('.left').click(function () {
rotateLeft(); // Call
on = 1; // Set delay on
});
play = setInterval(function () {
rotateLeft()
}, 3000)
// Rotate left
function rotateLeft() {
if (on == 0) {
var frontElem = $('.p_slider__item.front');
var leftElem = $('.p_slider__item.left');
var backElem = $('.p_slider__item.back');
var rightElem = $('.p_slider__item.right');
frontElem.removeClass('front').addClass('left');
leftElem.removeClass('left').addClass('back');
backElem.removeClass('back').addClass('right');
rightElem.removeClass('right').addClass('front');
setTimeout(function () {
on = 0; // Accept clicks again
}, time)
}
}
// Rotate right
function rotateRight() {
if (on == 0) {
var frontElem = $('.p_slider__item.front');
var leftElem = $('.p_slider__item.left');
var backElem = $('.p_slider__item.back');
var rightElem = $('.p_slider__item.right');
frontElem.removeClass('front').addClass('right');
leftElem.removeClass('left').addClass('front');
backElem.removeClass('back').addClass('left');
rightElem.removeClass('right').addClass('back');
setTimeout(function () {
on = 0; // Accept clicks again
}, time)
}
}
$('.p_slider__item img').hover(function () {
clearInterval(play)
})
$('.p_slider__item img').mouseenter(function () {
$(this).animate({ 'top': '-14px' }, 300);
})
$('.p_slider__item img').mouseout(function () {
$(this).stop(true, false).animate({ 'top': '0px' }, 300)
play = setInterval(function () {
rotateLeft()
}, 3000)
})
JSFiddle: http://jsfiddle.net/pL03g26f/2/
I am trying to create a div which would look as a box, and then it would automatically rotate to show different texts within it.
The effect in question is as shown in the 'RATATOUILLE', 'LASSITUDE', 'MURMUROUS', PALIMPSEST' & 'ASSEMBLAGE' buttons on the page:
http://tympanus.net/Development/CreativeLinkEffects/
I did use the code from a previous project written by someone else (author unknown).
I have a cube div, with 4 panels in it, and first 2 panels marked initial panel and next panel
<div class="cube flip-to-bottom">
<div class="initialpanel"><span>1st Panel</span></div>
<div class="nextpanel"><span>2nd Panel</span></div>
<div><span>3rd Panel</span></div>
<div><span>4th Panel</span></div>
</div>
both styled
.initialpanel {
-webkit-transform: translateZ(25px);
-moz-transform: translateZ(25px);
-o-transform: translateZ(25px);
-ms-transform: translateZ(25px);
transform: translateZ(25px);
}
.nextpanel {
-webkit-transform: rotateX(-90deg) translateZ(-25px);
-moz-transform: rotateX(-90deg) translateZ(-25px);
-o-transform: rotateX(-90deg) translateZ(-25px);
-ms-transform: rotateX(-90deg) translateZ(-25px);
transform: rotateX(-90deg) translateZ(-25px);
}
and finally a class which enables flip on the cube div
.flipNow {
-webkit-transform: rotateX(89deg);
-moz-transform: rotateX(89deg);
-o-transform: rotateX(89deg);
-ms-transform: rotateX(89deg);
transform: rotateX(89deg);
}
Tying these two together is my javascript which would go through the cube's children div, renaming through each iteration to animate using CSS.
function startRotating(currentIndex) {
current = $(".cube >div.initialpanel");
nextCurrent = current.next();
next = $(".cube >div.nextpanel");
nextNext = next.next();
var flipNow = setTimeout(function(){
$(".cube").addClass("flipNow");
}, 2000);
var stopFlip = setTimeout(function(){
$(".cube").removeClass("flipNow");
current.removeClass("initialpanel");
next.addClass("initialpanel");
next.removeClass("nextpanel");
nextNext.addClass("nextpanel");
}, 3000);
setTimeout(function(){
if(nextNext.length ===1){
startRotating($("div.initialpanel"));
}
},4000);
}
This code is supposed to rotate panel 1 and show panel 2, and rotate panel 2 and show panel 3, and rotate panel 3 and show panel 4 and stop after panel 4 as there are no more panels.
The rotation and revelations occour as expected, but due to removing flipNow class and renaming children div classes, the flip reverts back to initial position and then rotates to its new position. This is a link where a working copy of my problem is being hosted: http://jsfiddle.net/fatgamer85/m71osbLt/4/
any help would be appreciated which would help me to stop the double rotation on every panel reveal.
Thanks
I modified your fiddle (quite heavily) to give you a general case for N sided figure (in my example it's 5): fiddle. If you need further explanation, ask.
Is there any way to rotate or spin below image in jQuery. If user swipe up or touch up it rotate clockwise .Or if user swipe down it rotate anticlockwise. In other word is there any way to spin the tyre image clockwise or anticlockwise using mouse over up and mouse down event .so that it look we type is scrolling ? Can I use animation function?
thanks
here is my fiddle
http://jsfiddle.net/wemsbtwj/
function scrolling() {
$("img").css({
'transform': 'rotate(' + ($("main").scrollTop() / mainHeight * 360) + 'deg)'
});
}
var mainHeight = $("main").height();
window.addEventListener("scroll", scrolling, false);
You can use reel or threesixty jQuery plugin for 360 Degrees Image Display.
Here is a list of 360-degrees-image-display-plugins.
If you are thinking of using this as a product image. usually it is done using multiple images of the product taken from different angles slightly different from each other, and then they are changed based on the mouse movement.
If you just want to rotate this image there are many ways, you can take advantage of CSS3 animate and change the image animation property. A good library to look at is
Animate.css http://daneden.github.io/animate.css/
and you can use the Flipper classes, but change the speed so it rotate slower. you can change this using JQuery .CSS function.
fiddle to rotate image with 360deg - http://jsfiddle.net/invincibleJai/wemsbtwj/1/
this what can be done with just jquery.
http://jsfiddle.net/invincibleJai/u62YD/5/
$("img").click(function(){
if($(this).attr("class") == $(this).attr("id")){
$(this).removeClass();
}
else{
$(this).addClass($(this).attr("id"));
}
});
body {
font: 13px/16px "Lucida Sans Unicode","Lucida Grande",sans-serif;
}
.pic_translate {
/*Firefox*/
-moz-transform: translate(200px, 50px);
/*WebKit - Chrome and Safari*/
-webkit-transform: translate(200px, 50px);
/*Internet Explorer 9*/
-ms-transform: translate(200px, 50px);
/*Opera*/
-o-transform: translate(200px, 50px);
/*general*/
transform: translate(200px, 50px);
/*other properties*/
margin-bottom: 70px;
}
.pic_rotate {
/*Firefox*/
-moz-transform: rotate(360deg);
/*WebKit - Chrome and Safari*/
-webkit-transform: rotate(360deg);
/*Internet Explorer 9*/
-ms-transform: rotate(360deg);
/*Opera*/
-o-transform: rotate(360deg);
/*general syntax*/
transform: rotate(360deg);
}
.pic_scale {
/*Firefox*/
-moz-transform: scale(2, 0.5);
-moz-transform-origin: top left;
/*WebKit - Chrome and Safari*/
-webkit-transform: scale(2, 0.5);
-webkit-transform-origin: top left;
/*Internet Explorer 9*/
-ms-transform: scale(2, 0.5);
-ms-transform-origin: top left;
/*Opera*/
-o-transform: scale(2, 0.5);
-o-transform-origin: top left;
/*general syntax*/
transform: scale(2, 0.5);
transform-origin: top left;
}
.pic_skew {
/*Firefox*/
-moz-transform: skew(20deg, -10deg);
/*WebKit - Chrome and Safari*/
-webkit-transform: skew(20deg, -10deg);
/*Internet Explorer 9*/
-ms-transform: skew(20deg, -10deg);
/*Opera*/
-o-transform: skew(20deg, -10deg);
/*general syntax*/
transform: skew(20deg, -10deg);
/*other properties*/
margin-top:50px;
margin-left:100px;
}
img {
/*Firefox*/
-moz-transition: all 3s;
/*WebKit - Chrome and Safari*/
-webkit-transition: all 3s;
/*Opera*/
-o-transition: all 3s;
/*general syntax*/
transition: all 3s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p>
Translate 200 X and 50 Y, adding a margin at the bottom to prevent overlapping:
</p>
<img src="data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOXMv8+fhw/v739/f+8PD98fH/8mJl+fn/9ZWb8/PzWlwv///6wWGbImAPgTEMImIN9gUFCEm/gDALULDN8PAD6atYdCTX9gUNKlj8wZAKUsAOzZz+UMAOsJAP/Z2ccMDA8PD/95eX5NWvsJCOVNQPtfX/8zM8+QePLl38MGBr8JCP+zs9myn/8GBqwpAP/GxgwJCPny78lzYLgjAJ8vAP9fX/+MjMUcAN8zM/9wcM8ZGcATEL+QePdZWf/29uc/P9cmJu9MTDImIN+/r7+/vz8/P8VNQGNugV8AAF9fX8swMNgTAFlDOICAgPNSUnNWSMQ5MBAQEJE3QPIGAM9AQMqGcG9vb6MhJsEdGM8vLx8fH98AANIWAMuQeL8fABkTEPPQ0OM5OSYdGFl5jo+Pj/+pqcsTE78wMFNGQLYmID4dGPvd3UBAQJmTkP+8vH9QUK+vr8ZWSHpzcJMmILdwcLOGcHRQUHxwcK9PT9DQ0O/v70w5MLypoG8wKOuwsP/g4P/Q0IcwKEswKMl8aJ9fX2xjdOtGRs/Pz+Dg4GImIP8gIH0sKEAwKKmTiKZ8aB/f39Wsl+LFt8dgUE9PT5x5aHBwcP+AgP+WltdgYMyZfyywz78AAAAAAAD///8AAP9mZv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAKgALAAAAAA9AEQAAAj/AFEJHEiwoMGDCBMqXMiwocAbBww4nEhxoYkUpzJGrMixogkfGUNqlNixJEIDB0SqHGmyJSojM1bKZOmyop0gM3Oe2liTISKMOoPy7GnwY9CjIYcSRYm0aVKSLmE6nfq05QycVLPuhDrxBlCtYJUqNAq2bNWEBj6ZXRuyxZyDRtqwnXvkhACDV+euTeJm1Ki7A73qNWtFiF+/gA95Gly2CJLDhwEHMOUAAuOpLYDEgBxZ4GRTlC1fDnpkM+fOqD6DDj1aZpITp0dtGCDhr+fVuCu3zlg49ijaokTZTo27uG7Gjn2P+hI8+PDPERoUB318bWbfAJ5sUNFcuGRTYUqV/3ogfXp1rWlMc6awJjiAAd2fm4ogXjz56aypOoIde4OE5u/F9x199dlXnnGiHZWEYbGpsAEA3QXYnHwEFliKAgswgJ8LPeiUXGwedCAKABACCN+EA1pYIIYaFlcDhytd51sGAJbo3onOpajiihlO92KHGaUXGwWjUBChjSPiWJuOO/LYIm4v1tXfE6J4gCSJEZ7YgRYUNrkji9P55sF/ogxw5ZkSqIDaZBV6aSGYq/lGZplndkckZ98xoICbTcIJGQAZcNmdmUc210hs35nCyJ58fgmIKX5RQGOZowxaZwYA+JaoKQwswGijBV4C6SiTUmpphMspJx9unX4KaimjDv9aaXOEBteBqmuuxgEHoLX6Kqx+yXqqBANsgCtit4FWQAEkrNbpq7HSOmtwag5w57GrmlJBASEU18ADjUYb3ADTinIttsgSB1oJFfA63bduimuqKB1keqwUhoCSK374wbujvOSu4QG6UvxBRydcpKsav++Ca6G8A6Pr1x2kVMyHwsVxUALDq/krnrhPSOzXG1lUTIoffqGR7Goi2MAxbv6O2kEG56I7CSlRsEFKFVyovDJoIRTg7sugNRDGqCJzJgcKE0ywc0ELm6KBCCJo8DIPFeCWNGcyqNFE06ToAfV0HBRgxsvLThHn1oddQMrXj5DyAQgjEHSAJMWZwS3HPxT/QMbabI/iBCliMLEJKX2EEkomBAUCxRi42VDADxyTYDVogV+wSChqmKxEKCDAYFDFj4OmwbY7bDGdBhtrnTQYOigeChUmc1K3QTnAUfEgGFgAWt88hKA6aCRIXhxnQ1yg3BCayK44EWdkUQcBByEQChFXfCB776aQsG0BIlQgQgE8qO26X1h8cEUep8ngRBnOy74E9QgRgEAC8SvOfQkh7FDBDmS43PmGoIiKUUEGkMEC/PJHgxw0xH74yx/3XnaYRJgMB8obxQW6kL9QYEJ0FIFgByfIL7/IQAlvQwEpnAC7DtLNJCKUoO/w45c44GwCXiAFB/OXAATQryUxdN4LfFiwgjCNYg+kYMIEFkCKDs6PKAIJouyGWMS1FSKJOMRB/BoIxYJIUXFUxNwoIkEKPAgCBZSQHQ1A2EWDfDEUVLyADj5AChSIQW6gu10bE/JG2VnCZGfo4R4d0sdQoBAHhPjhIB94v/wRoRKQWGRHgrhGSQJxCS+0pCZbEhAAOw==" alt="nice_picture" id="pic_translate" />
<p>
Rotate 360 degrees clockwise:
</p>
<img src="data:image/gif;base64,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" alt="nice_picture" id="pic_rotate" />
<p>
Scale by 2 times on the X axis and 0.5 on the Y, using the top left point as origin:
</p>
<img src="data:image/gif;base64,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" alt="nice_picture" id="pic_scale" />
<p>
Skew 20 degrees X and -10 degrees Y, adding top and left margins to keep the picture within the visible page:
</p>
<img src="data:image/gif;base64,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" alt="nice_picture" id="pic_skew" />
I have an AngularJS animation set up for sliding in panels of an ng-switch directive using the latest version of Angular (1.2.9). I am noticing curious behavior if I try to animate the position using "transform: translate(0,0);" instead of just the "left" attribute. When using translate, the animation sometimes works properly and sometimes not (I'd say it's about 50/50). However, if I animate the left attribute, it works correctly 100% of the time.
The CSS for the animation I am using is
.slide-animation.ng-enter,
.slide-animation.ng-leave {
position: absolute;
-webkit-transition: all ease-in-out 1s;
-moz-transition: all ease-in-out 1s;
-o-transition: all ease-in-out 1s;
transition: all ease-in-out 1s;
}
.slide-animation.ng-enter {
-webkit-transform: translate(-125%, 0);
-ms-transform: translate(-125%, 0);
transform: translate(-125%, 0);
}
.slide-animation.ng-enter.ng-enter-active,
.slide-animation.ng-leave {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.slide-animation.ng-leave.ng-leave-active {
-webkit-transform: translate(125%, 0);
-ms-transform: translate(125%, 0);
transform: translate(125%, 0);
}
Here is a fiddle to demonstrate the issue I am having: http://jsfiddle.net/HXACU/5/
I wanted to use translate because it gives significantly better performance than animating the left attribute on mobile devices. Do I have something wrong, is this a bug in Angular, or should I give up and just animate with "left"?
I think it's a rendering time race - caused by the 125%. I don't think it knows what 125% is until it's rendered, I've seen similar things before.
For argument sakes I replaced all % with px equivalents here: http://jsfiddle.net/27te5/1/ and it appears to be more stable (i can't break it)
.slide-animation, .slide-animation-transform {
width: 96px;
}
.slide-animation.RL.ng-enter, .slide-animation.LR.ng-leave.ng-leave-active {
left:150px;
}
/*etc. etc.*/
I'm sure you would rather % values but i hope it helps in any case.
I am looking to flip an image. I have gotten the css to work using:
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
I am looking to apply this to an image but am unsure of the formatting.
I tried doing:
var flip = "-moz-transform: scaleX(-1),-o-transform: scaleX(-1),-webkit-transform: scaleX(-1),transform: scaleX(-1),filter: FlipH,-ms-filter: 'FlipH'";
And then:
$("#chicken").delay(scrolllen).fadeOut(0).css({ left: 2600 + "px" , top : 2370 + "px" + flip}).fadeIn(0).animate({ left: 1600 + "px" , top : 2370 + "px"}, 5000, 'linear');
at a later point, but it doesn't seem to apply.
Are you trying do to something like this?
$('#image').mouseover(function(){
$(this).addClass('flipped');
}).mouseleave(function(){
$(this).removeClass('flipped');
});
the css:
.flipped {
transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-khtml-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
}
jsFiddle here
I'd just use a class, like so:
.flipped {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
Then just swap the class:
$("#chicken").delay(2000).fadeOut(1, function() {
$(this).addClass('flipped').show()
.animate({ left: 1600 + "px" , top : 2370 + "px"}, 5000, 'linear');
});
FIDDLE
I'm not completely sure I understand what you're looking for.
I'm thinking perhaps it can be done without any JavaScript at all? If you're looking to flip along the X axis, with some animation?
Flipping Image on Hover
JSFiddle: Image Flip on :hover
For this demo, I had to place the image HTML into a wrapper <div>, because otherwise the :hover and the scale() changes conflict with one another in funky ways. You'll understand if you remove the wrapper <div>.
HTML
<div class="flippy">
<img src="http://lorempixel.com/200/200/"/>
</div>
CSS:
.flippy>img {
/**/-moz-transform:scale(1,1);-webkit-transform:scale(1,1);
transform:scale(1,1);
/**/-webkit-transition:all 600ms ease;-webkit-transition:all 600ms ease;
transition:all 600ms ease; }
.flippy:hover>img {
/**/-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1);
transform:scale(-1,1); }
If you need to control it with JavaScript, it should be easy enough to replace the :hover with another class, like .flipped, then do as you please in JS to activate it's flip state on and off.
//Chase.
Flipping Image on Attribute (click-based demo)
jsFiddle: Image Flip on Attribute
In this demo, the image flips when is has the flipped attribute set.
JavaScript:
// Toggles the 'flipped' attribute on the <img> tag.
$('.flippy').click(function(){
if ($(this).attr('flipped'))
$(this).removeAttr('flipped');
else $(this).attr('flipped','flipped');
});
CSS:
/* vendor-prefixes have been removed in this example */
/* We just change the scale based on the flipped attribute */
.flippy {
transform:scale(1,1);
transition:all 600ms ease; }
.flippy[flipped] {
transform:scale(-1,1); }
HTML: <img class="flippy" src="http://lorempixel.com/200/200/"/> -- as you can see, we no longer need the <div> wrapper for this example, as the :hover conflicts are no longer an issue.
//Chase.
<style type="text/css">
.transform-image {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
</style>
<script type="text/javascript">
$("#chicken").hover(function(){
$(this).addClass("transform-image") },
function () {
$(this).removeClass("transform-image");
};
})
</script>