I want to give user the option to rotate the content of my webpage, including images, text and divs. Is this possible?
PS:
I want to rotate the entire webpage. Not just a container div.
You could use CSS3
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
http://jsfiddle.net/KdNNy/1/
Doesn't work on all browsers though. This example is only for firefox and chrome/safari. Opera should have it as well. Maybe even IE
EDIT
And just in case anyone thinks "oh he's just rotating a DIV!", check this
http://jsbin.com/utupu5/ (full page)
the only way I have heard of to make this achieved is embeding your HTML in a SVG foreign content element.
If you're using jQuery you can use the jRumble plugin to achieve this
The relevant website can be found here
Related
One of my webpages is showing blurry text (roboto font) for a second when page loads. The text shifts little bit. You should see this on chromium based browsers like chrome, brave, vivaldi. The page link is https://elomymelo.com/soundcore%20motion%20plus%20review.html
So when some elements start appearing, from then the first second is okay. The the second second is blurry text and then after third it's fine again. The thing is I have some div that has dynamically applied scaling after 1 second. But the same thing is done on other pages. But only the mentioned page is showing this problem, which is not the heaviest page at all.
CSS
-webkit-font-smoothing: antialiased;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transform: translate3d(0,0,0) !important;
transform: translate3d(0,0,0) !important;
-webkit-perspective: 1000;
-webkit-filter: blur(radius);
-webkit-filter: blur(0);
I tried some of these but no luck. I am not sure where to put these like on the main container where inner text is blurry or on those transformed divs inside the main container? Is there any possibility that some of those fixes need to be added on the main container and some of those on the transformed divs?
I've seen a lot of chrome updates. That problem was there before Chrome 94, probably 96 the blurry problem was kinda fixed. But now in chrome 105 seeing it again. No blurry text in firefox and safari. But only that main article container div has the problem. Please anyone knows where to put those css fixes or any suggested solutions?
Building a CMS of sorts where the user can move around boxes to build a page layout (basic idea anyway).
I'd like to pull the actual contents in from the database and build out the "page", but have it display at 50% scale.
I realize I could have 2 sets of CSS - one for the actual front-facing page, and one for the admin tool and just shrink everything accordingly, but that seems like a pain to maintain.
I was hoping there might be some kind of jquery or CSS or something that would allow me to populate a div and give it the properties (?) of 50% scale.
You can simply use the zoom property:
#myContainer{
zoom: 0.5;
-moz-transform: scale(0.5);
}
Where myContainer contains all the elements you're editing. This is supported in all major browsers.
This cross-browser lib seems safer - just zoom and moz-transform won't cover as many browsers as jquery.transform2d's scale().
http://louisremi.github.io/jquery.transform.js/
For example
$('#div').css({ transform: 'scale(.5)' });
Update
OK - I see people are voting this down without an explanation. The other answer here won't work in old Safari (people running Tiger), and it won't work consistently in some older browsers - that is, it does scale things but it does so in a way that's either very pixellated or shifts the position of the element in a way that doesn't match other browsers.
http://www.browsersupport.net/CSS/zoom
Or just look at this question, which this one is likely just a dupe of:
complete styles for cross browser CSS zoom
My problem is that I use a html to pdf generator (acts_as_flying_saucer) that support CSS2 and javascript but not css3 so I can't use the transform: rotate(-90deg) (of course with different engines like webkit and stuff).
I tried PDFKit and Wicked_pdf but they didn't have full CSS2 support whereas I needed the position: fixed to set my footers on all pages to the bottom of the page.
SO my question is if there is a way to get vertical text with either CSS2 and / or Javascript /JQuery? CSS3 is out of the question unfortunately. :(
In IE the writing-mode is available.
<span style="writing-mode: tb-rl;">CSS2?</span>
See more info: http://msdn.microsoft.com/en-us/library/ms535153%28v=vs.85%29.aspx
No it's not possible without rotate. I don't know just crazy idea using canvas.
http://jsfiddle.net/LBsuQ/
I am wondering if there is any way to dynamically rotate an image or invert an image using a client side solution? I don't care if it is plain old javascript, jquery plugin, css. I just wondered if there was some way to do this dynamically on the client side rather than having to write server side code to do for each image which I can do.
I tried searching on Google for different keywords but couldn't find anything.
EDIT: I am looking for a solution that does not require anything from HTML 5.
Firefox, Safari and Opera support this:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
you can also do this in IE8, maybe even 7(?):
position: absolute;
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
rotate an element using JS:
var deg = 90
$('element').style.MozTransform = 'rotate(' + deg + 'deg)';
$('element').style.WebkitTransform = 'rotate(' + deg + 'deg)';
edit:
wow, according to http://msdn.microsoft.com/en-us/library/ms532972%28VS.85%29.aspx the rotation works for IE 5.5!
Very interesting javascript solution:
http://www.stableflow.com/downloads/jquery-plugins/360-degrees-product-view/
Imagine that you are running some shop or blog and you present user with your products. The solution allows you to save space and present products view in very realistic form by means of the script. It allows to forget about flash (which is still not supported by all mobile devices).
What you need to utilize it is:
Download free plugin (use link above)
Setup the plugin using instructions
Create and add a series of images for each product (the more images the better rotation effect you will get)
Follow raised interest to your products from users
It really worked for me. Tested on Android mobile(lg p500), iPad and iPod touch as well.
You can do it using the canvas element, as shown here. I'm not 100% sure all browsers support it already. It is part of HTML5 (read more about it on Wikipedia), so FF, Safari and Chrome support it. Not sure about IE8.
is it possible the proportions within an iframe? e.g. 100%, 50%, 25%, ...
I would like to implement a "magnifying glass" for a webpage or iframe. It does not have to be implemented in Javascript within a website, but even a desktop solution would be great.
Is this a possibility? or would it be incredibly complicated?
Any ideas? Help would be amazing =)
In Firefox you can use the -moz-transform CSS property to zoom, using the scale() value. Note that this doesn't change the amount of space that the element takes up on the page.