Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rotating Image around y axis

Tags:

css

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>

fiddle

like image 485
Aditya Ponkshe Avatar asked Aug 19 '13 09:08

Aditya Ponkshe


People also ask

How do you rotate an image on axis?

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.

How do you rotate an image on the Y axis in Photoshop?

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.

What are the 3 types of rotation?

These rotations are called precession, nutation, and intrinsic rotation.


1 Answers

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 */
 }
like image 98
Divyek Avatar answered Sep 19 '22 07:09

Divyek