CODEWITHSUNDEEP
csscss-transforms
Federico
Federico

Reputation: 1422

Flip image and stop at a certain angle

I have this CSS:

-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";

that flips and image upside down. All I want is the image to stop when has flipped 90° and so it's invisible.

Is that possible in any way?

Upvotes: 1

Views: 118

Answers (2)

Harry
Harry

Reputation: 89760

If your need is to flip and image by 90 degrees such that it becomes invisible then you should look at using rotate(90deg) transforms (rotateX(90deg) in this case) like in the below snippet.

I am not sure on when you would be making the element become invisible (like :hover, click etc) but if you make it invisible on :hover then put the :hover selector on a container element instead of the image itself. This is because once the image is hovered and becomes invisible due to rotation then the mouse pointer is technically no longer over the image (in other words, hover is no longer applicable). This would mean that the image immediately reverts back to original state automatically.

div {
  border: 1px solid #777;
  height: 100px;
  width: 200px;
}
img {
  transition: all 1s;
}
div:hover img {
  transform: rotateX(90deg);
}
<div>
  <img src="http://lorempixel.com/200/100/nature/1" />
</div>

On the other hand if you are insistent on using scaleY() transform to achieve this effect, then you would have to use scaleY(0) in-order to make the element invisible. scaleY(-1) will always end up at -180deg and there is no way to stop this in the middle.

div {
  border: 1px solid #777;
  height: 100px;
  width: 200px;
}
img {
  transition: all 1s;
}
div:hover img {
  transform: scaleY(0);
}
<div>
  <img src="http://lorempixel.com/200/100/nature/1" />
</div>

Upvotes: 1

moeses
moeses

Reputation: 507

http://davidwalsh.name/demo/css-flip.php

Take a look at this demo from great David Walsh :)

I think for you the vertical flip is more interesting

Just change the .front and .back @ :hover to 90deg and you get the result you want!

Upvotes: 0

Related Questions