I have a simple example of a div, which I want to rotate 180 degrees horizontally, my example rotates vertically which I do not want
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: yellow;
/* Rotate div */
-ms-transform: rotate(27deg); /* IE 9 */
-webkit-transform: rotate(37deg); /* Chrome, Safari, Opera */
transform: rotate(37deg);
}
</style>
</head>
<body>
<div>Hello</div>
<br>
</body>
</html>Effect: Return letter
Determine the distance between the plane z = 0 and the user to give some perspective to the 3D element positioned.
Indicates that the children of the element should be placed in 3D space.
Determines whether the back surface of an element is visible when it is faces the user. In this case it is in hidden which means that the back surface is not visible.
Allows you to modify the coordinate space of the format model visual and with the value rotateY moves on the axis
Y
.carta-box {
width: 200px;
height: 250px;
position: relative;
perspective: 1000px;
}
.carta-box:hover .carta {
transform: rotateY(180deg);
}
.carta {
transform-style: preserve-3d;
transition: all 1s linear;
}
.cara {
position: absolute;
backface-visibility: hidden;
}
.cara.detras {
transform: rotateY(180deg);
}<div class="carta-box">
<div class="carta">
<div class="cara">
<img src="http://wiki.vykar.com/skins/common/images/2000px-Playing_card_spade_A_svg.png" width="200" height="250px">
</div>
<div class="cara detras">
<img src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" width="200" height="250px">
</div>
</div>
</div>Add the following to your CSS. There are other ways to do as with JQuery libraries, but it is not necessary. Only with pure CSS can you do it.
div {
width: 200px;
height: 100px;
background-color: yellow;
/* Rotate div */
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}