I've created a CSS3 tile flip effect with the following code:
HTML:
<div class="flip-container">
<div class="flipper">
<div class="front img1">
</div>
<div class="back" id="back1"></div> // img1 and back1 are specified in the CSS with the background-image property.
</div>
</div>
CSS:
.flip-toggle.flip .flipper {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.back {
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
border: 0;
}
However, as can be seen here, the effect doens't work properly. On Chrome, Firefox and Safari, it properly displays the back image of each tile, but Internet Explorer simply mirrors the front image.
How can I solve this? Any help would be much appreciated!
Have a read at http://davidwalsh.name/css-flip#ieflip
In the end, to support IE10+, you need to apply the rotation to the two sides and not their container.. (because preserve-3d is not supported)
Related
This question already has answers here:
CSS transform doesn't work on inline elements
(2 answers)
Closed 3 years ago.
I have write some line of stylesheet code for applying the transition and transform effect for an image.
The problem is that the code is working for Internet Explorer browser fine but not working in Google Chrome browser.
<a href="/SM/AddSMHome/" title="Add New Student" class="rotateImage">
<img src="/icon/SM_add_student3.png" class="img- responsive img-circle img-thumbnail" style="max-width: 100px;max-height: 100px;" alt="Add New Student"></a>
.rotateImage:hover {
transition: all 800ms ease-in-out !important;
-ms-transform: rotate(360deg) !important;
-webkit-transform: rotate(360deg) !important;
-moz-transform: rotate(360deg) !important;
-o-transform: rotate(360deg) !important;
transform: rotate(360deg) !important;
}
Non-replaced inline boxes are not part of what is considered a “transformable” element, and a is inline by default.
Add display:inline-block for the element, then it will work.
(I would advise to add that for the default state of the element though, if you only add it on hover, it might have unexpected side effects in more complex layouts.)
If you add display:block to the link it works.
.rotateImage {
display: block;
}
.rotateImage:hover {
transition: all 800ms ease-in-out !important;
-ms-transform: rotate(360deg) !important;
-webkit-transform: rotate(360deg) !important;
-moz-transform: rotate(360deg) !important;
-o-transform: rotate(360deg) !important;
transform: rotate(360deg) !important;
}
<a href="/SM/AddSMHome/" title="Add New Student" class="rotateImage">
<img src="/icon/SM_add_student3.png" class="img- responsive img-circle img-thumbnail" style="max-width: 100px;max-height: 100px;" alt="Add New Student"></a>
When I rotate an image using rotate(90) the top of the image is cut off, even if the container has overflow: auto.
#container {
width: 100%;
overflow: auto;
}
.rotate90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
<div id="container">
<img src="https://dummyimage.com/2048x1024/000/fff" id="image" class="rotate90" alt="">
</div>
Example: https://jsfiddle.net/dh0o6vz3/3/
Is there a way to alter the container's css so that it overflows above the image as well as below?
You need to use overflow:visible instead and you may also change the transform-origin depending on how you want to show the image
#container {
width: 100%;
overflow: visible;
border: 1px solid;
}
.rotate90 {
transform: rotate(90deg);
transform-origin: bottom;
}
<div id="container">
<img src="https://dummyimage.com/248x124/000/fff" id="image" class="rotate90" alt="">
</div>
So I ended up having to force a translation, which I guess makes sense.
.rotate90 {
-webkit-transform: rotate(90deg) translate(25%);
-moz-transform: rotate(90deg) translate(25%);
-o-transform: rotate(90deg) translate(25%);
-ms-transform: rotate(90deg) translate(25%);
transform: rotate(90deg) translate(25%);
}
This doesn't work in all cases, as the width of the image determines what % translate I need.
But it works well enough for the use cases I have,
How do I rotate text 90 degrees without using the style sheet? I have placed the following instruction in the header area of the page:
<style>
div.rotate-text {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>
Then I placed the following around the paragraph in question.
<div id="rotate-text">
<p>My paragraph</p>
</div>
But its not working and hence my question.
Here is a small visual example:
#rotate-text {
width: 25px;
transform: rotate(90deg);
}
<div id="rotate-text">
<p>My paragraph</p>
</div>
You can use css property writing-mode
writing-mode: vertical-rl
or
writing-mode: vertical-lr
Or using transform property: rotate
transform: rotate(90deg)
you use of id in html code, so you must use of # in css.
Change:
div.rotate-text {
To:
div#rotate-text {
div#rotate-text {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
width: 100px;
transform-origin: top left;
margin: 50px;
}
<div id="rotate-text">
<p>My paragraph</p>
</div>
Writing mode is better for text content, with transform: rotate() the text container still stays with the horizontal dimensions.
writing-mode: vertical-rl; //Rotate -90deg
writing-mode: vertical-lr; //Rotate 90deg
to get the text reading from the bottom up, use this:
#rotate-text {
writing-mode: vertical-lr;
transform: scale(-1, -1);
}
<div id="rotate-text">
<p>My paragraph</p>
</div>
I am rotating an element left by 1 degree. And then rotating the element in it by -1 degree so that the inner element is straight.
Have tested this in Chrome and Safari and it works fine. But in FireFox the inner element rotate is being ignored (still untested in IE).
Any idea what might be wrong?
HTML:
<div class="rotated-left">
<div class="rotated-right">
<p>This text should be straight.</p>
</div>
</div>
CSS:
.rotated-left {
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-o-transform: rotate(1deg);
-ms-transform: rotate(1deg);
transform: rotate(1deg);
}
.rotated-right {
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
transform: rotate(-1deg);
}
I tested in chrome, firefox and IE, didn't have issues with any of them. I even removed the browser-specific elements. Still worked.
Make sure you are calling your CSS correctly, maybe?
Is it in any way possible to rotate the entire webpage 90 degres and then fit the screen size? When I do the transform:rotate(90deg); the width and height ratio is the same as before.
How can I fit the HTML element inside the screen after rotating?
HTML:
<div id="red">
Content
</div>
CSS:
#red {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
background-color:#ff0000;
}
JSfiddle