I have an image which is divided into two equal parts. I am trying rotate the right part of the image in -180°(anti-clockwise) around y axis on hover.
Problem is some times(randomly) image gets rotated in 180°(clockwise) instead of -180°(anti-clockwise). what might be the reason behind this? I am using chrome.
css:-
.container {
position: relative;
margin-top : 10px;
width : 500px;
height: 330px;
-webkit-perspective: 1500px;
box-shadow: 3px 3px 13px #AAA;
}
.frontDiv {
padding: 20px;
width: 500px;
height: 330px;
}
.frontImg {
position: absolute;
border:1px solid;
height : 281px;
width : 225px;
overflow: hidden;
background-image: url('iday.jpg');
transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
backface-visibility : hidden;
-webkit-transform-origin:0% 0%;
}
.f1 {
top: 20px;
left:20px;
background-position: 0px 0px;
}
.f2 {
top: 20px;
left:245px;
background-position: -225px 0px;
}
.frontDiv:hover .f2
{
-webkit-transform : rotateY(-180deg);
}
html:-
<article class='container'>
<div class='frontDiv'>
<div class='frontImg f1'></div>
<div class='frontImg f2'></div>
</div>
</article>
I have mounted my AXIS P1311 camera but the image is upside down. How can I flip image on it? In the camera's web interface go to Setup > Video&Audio > Camera Settings and under Image Appearance select to Rotate image 180 degrees. Save settings.
With your image open in Photoshop, go to Image > Image Rotation. 2. Select from the image rotation options — 90 degrees clockwise, 90 degrees counterclockwise, or 180 degrees.
These rotations are called precession, nutation, and intrinsic rotation.
Some of the browsers are not supported rotate like, Internet Explorer 9 (and earlier versions) and Opera does not support the rotateX or rotateY method.
else try
.frontDiv:hover .f2
{
transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg); /* IE 9 */
-webkit-transform: rotateY(-180deg); /* Safari and Chrome */
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With