When I want to rotate a div I want to rotate the text as well, but I have still issues with anti-aliasing. The text is blurry and I cant fix it. The effect occurs in Firefox and Chrome.
I found this solution, but it didn't work for me.
-webkit-backface-visibility: hidden;
html
<div id="rotate">
<span>Hi, iam rotated blurry text </span>
</div>
css
#rotate{
margin-top:30px;
-moz-transform: rotate(-9deg);
-ms-transform: rotate(-9deg);
-o-transform: rotate(-9deg);
-webkit-transform: rotate(-9deg);
transform: rotate(-9deg);
background:#292929;
font-size:30px;
color:green;
display:inline-block;
}
link: http://jsfiddle.net/P52Yu/6/
plz help :)
Chrome has difficult with numbers with a lot of decimal places at times when there is a transform involved. Try doing a parseInt on those numbers to bring the decimal places down. You'll find the blurryness often goes away with this simple fix.
Related
When i put transform: scale(1.1); on hover on some element the image became blurry. How to fix this bug?
Example
Try this, it's work fine for me!
img {
-webkit-backface-visibility: hidden;
-ms-transform: translateZ(0); /* IE 9 */
-webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
transform: translateZ(0);
}
TL;DR
transform: scale is actually scaling the original image, and because you are leaving it to the browser's render engine to figure out what should go there you got a blurry image. try
img {
transform: scale(.9)
}
img:hover {
transform: scale(1)
}
Aaron Sibler answered the question for me.
I just experienced this riddle. In your example, you’ll
need to transform img DOWN something like “transform: scale(0.7)” and
then scale UP to the images native dimensions on hover like
“transform: scale(1.0)”
The scale value is relative to the original image’s dimensions – not
their current dimensions on screen so a scale of 1 always equals the
original image’s dimensions.
I’ve used this here;
http://meetaaronsilber.com/experiments/css3imgpop/index.html
I had this problem with SVG scaling and blurry images. I scaled up a background image to 4.5 and the image rendered very blurry while scaling up.
I read that you can scale down first transform: scale(0.7) and then scale up to transform: scale(1.0). In my case this meant a huge rebuild of my animation. I had a very complex animation with multiple scales and transforms etc.
I just left all as is and added a pseudo scale width. The browser then seems to re-render every frame, but since the width does not actually change you still can use
transform: scale(x.x) for scaling and you get a very sharp image.
Maybe someone can confirm this. Here is my code. In my case the image was 86px wide and it zoomed up to 4.5 times the initial value.
<div class="overall-scale">
<div class="image-scale"></div>
</div>
#keyframes overall-scale {
0% {
transform: scale(1);
}
100% {
transform: scale(4.5);
}
}
#keyframes image-scale {
0% {
width: 86px;
}
100% {
width: 86px;
}
}
Hope this helps and my explanation makes sense.
Please comment if this does not work for you.
I' ve read all the comments, and tryied all solutions people suggested. But nothing was really good except rotate(360deg). Everything, except this one made stuttering on images, or they became too blurry initially. But rotating is looking strange if you don't hide it. So I decided to rotate for 0.0000001deg and it worked! Image is blurry only during the transition, but at the end and at the start of it it is sharp. May be I just had too small pictures.
So, my current solution is adding this part to CSS (and nothing else):
img {
transform: rotate(0.00000000001deg);
}
functionality:
User to stand in front of camera and take a picture.
What has been done:
Made use of of a <video> to capture motion image and have created a "Take Picture" button to capture the image to impose a still image. Have also incorporated a Zoom feature as well.
Issue:
The image is mirrored. Therefore, when user moves left, the image in the video feed will move right and when user moves left, the image in the video feed will move right.
I have changed the following transform:rotateY(), however, it is still giving me the same functionality whereby when user moves left, the image in the camera feed moves right and vice versa. Hence, what have I done wrong and how do I rectify the following issue.
.camera_feed_flip {
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
/* Safari and Chrome */
-moz-transform: rotateY(0deg);
/* Firefox */
transform: scale(1.0);
}
<div id="CameraFeed" align="center" style="position:absolute; widths:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=7; top:600px; left:0px; ">
<video id="video" width="1300px" height="1350" class="camera_feed_flip" style="position:absolute; z-index:16; top: 600px; left:-110px" autoplay></video>
</div>
I don't know about the transform css at all, but it strikes me that you are rotating the image by 0 degrees (and therefore not changing it at all) . Shouldn't it be by 180 degrees?
.camera_feed_flip {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
/* Safari and Chrome */
-moz-transform: rotateY(180deg);
/* Firefox */
transform: scale(1.0);
}
but then I have never used this css. I may not be accurate and therefore gvinig you an incorrect solution - sorry if that's the case :)
Folks, I have text on a div that has transform: rotate(3deg). In Firefox, the text is rendered wavy. Removing the transform to the div fixes the waviness. Is there a way for me to have my cake and eat it too?
HTML:
<div class="card turn-right">
<div class="card-text">
<p>Blah. Blah. Blah.</p>
</div>
</div>
CSS:
.card {
display: block;
width: 550px;
height: 375px;
}
.turn-right {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
Edit:
Additional information: I have to use a #font-face for this project.
Screenshot:
Try adding perspective
.turn-right {
-webkit-transform: perspective(9999px) rotate(3deg);
transform: perspective(9999px) rotate(3deg);
}
No need for -moz-transform in modern browsers
By the way, the same bug is present in webkit browsers.
Why does this work ?
I don't have a real answer, because I don't have the source for the browser. But my guess is the following. The browsers have a very good rendering engine, that can do lots of things, and does it pretty well. But doing all this is most of the time expensive (read: makes the browser slow). So, most of the time it is trying to guess: is this really necessary ? Do I really need to calculate the xxxx of the yyyy in the zzzz to display this ?
And some of the bugs come from that guess being incorrect, and omiting a necesary calculus.
The solution then, is to put there something that makes the browser rendering engine think "wait, I really need to calculate that, that is not the easy case".
Also in this line are fixes like translate3d(0,0,0) or translateZ(0) or backface-visibility hidden . What is the sense in translating something 0px ? They force the browser to do something the complicated way instead of the easy way, and solve - optimize the result.
well, I normally find the answer to my questions here but this time I didn't so I will now ask my first one here! :)
I have some rotated text on my page and it is positioned using position:absolute, like below:
.rotate-box .rotate-text{
display: block;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
position: absolute;
left: -45px;
top: 170px;
}
<div class="rotate-box">
<span class="rotate-text">Rotated text</span>
</div>
This works fine on all browsers (with webkit) except for Safari and Chrome where the text is displayed about 90px lower than in the other browsers.
To prevent this I have added:
#media screen and (-webkit-min-device-pixel-ratio:0){
.rotate-text {top: 80px !important;}
}
Now the text is in the correct place in all browsers but this doesn't feel right to me... Am I missing something here?
I hate adding browser exception code, it tends to come back and bite you in the long run... :o
Regards,
Anders
Change this line:
-webkit-transform: rotate(90deg);
to
-webkit-transform: rotate(90deg) translate(-100px, 16px);
As you know, this line is only used by the webkit browsers (Safari, Chrome)
You'll probably have to play around with the exact px figures, but then you can get rid of the extra #media screen tag.
Look into transform-origin. Basically, you should be able to do transform-origin: 0 0; (with all the prefixes, of course), and it'll hook the rotate to the top left, which sounds like what you want.
some designs on the Apple's user's webpage show a photo that is tilted slightly, like at a 5 or 10 degree angle. while this is no big deal, it does make the webpage totally different from "all the rest".
is it true that currently using HTML or CSS, this can't be done yet?
like the big photo in the middle:
alt text http://img7.imageshack.us/img7/383/phototilt.png
(the program lets you choose photos and then create the page (html and jpg) dynamically for you)
CCS 3 will offer this possibility, but it's still not cross-browser and you cannot do it with traditional HTML + CSS... yet.
Websites having a tilted image do it by rotating it in, say, Photoshop and making its background transparent. That's the whole trick there's to it.
Tip: save that picture to your HD and see by yourself. That's probably just an squared image with transparent background, or maybe it has the current background cut nicely to fit there.
You can do it, but only in Firefox 3.5+ and Safari 3.2+ (and recent webkit based browsers). Both provide browser specific CSS extensions for skew: -moz-transform and -webkit-transform respectively.
Here's a nice example that builds a 3d looking cube out of divs: (from http://www.fofronline.com/2009-04/3d-cube-using-css-transformations/)
<div class="cube">
<div class="topFace">
<div>
Content
</div>
</div>
<div class="leftFace">
Content
</div>
<div class="rightFace">
Content
</div>
</div>
And CSS:
.cube {
position: relative;
top: 200px;
}
.rightFace,
.leftFace,
.topFace div {
padding: 10px;
width: 180px;
height: 180px;
}
.rightFace,
.leftFace,
.topFace {
position: absolute;
}
.leftFace {
-webkit-transform: skewY(30deg);
-moz-transform: skewY(30deg);
background-color: #ccc;
}
.rightFace {
-webkit-transform: skewY(-30deg);
-moz-transform: skewY(-30deg);
background-color: #ddd;
left: 200px;
}
Yes, with CSS3 you can:
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
Supported by all the modern browsers and IE9+.
See CSS transform on MDN for more information.
To my knowledge you can not do that. Are you sure the image you are thinking of isn't tilted in Photoshop or similar and just added to the page like that?
You can use Apple specific CSS attributes (soon to be ratified, and then they'll remove the webkit prefixes for them) to do this and animation effects, but it will only show up in Safari and Chrome right now. Still, they look quite pretty and CSS is simple to do.
Right now it's probably just done in Photoshop, and nicely anti-aliased there as well, so that it has a consistent cross-browser appearance.
We are doing something similar at work, we have to do it on the fly.
You can't do it with just html/css, however we are using an image library through a php script to generate them automatically, and then make the background transparent.
Use a PHP GD Library. Makes things so much easier.
No. You can't.
Tilting images and text is still JavaScript juju.
Edit: Or, at least, you couldn't with CSS2. Starting with CSS3, there's the transform property, which includes rotations.