I'm building an app, where I create an canvas element of a specific div with the html2canvas javascript library. The problem is that it doesn't support CSS3 rotate property so if an image is rotated in the app html2canvas doesn't render it correctly (it doesnt apply rotate).
So, is it possible to rotate an HTML object without CSS3?
you can rotate in within an other canvas element, that can be rendered in html2canvas. here is an post about that workaround:
html2canvas and css transform rotate
(If you don't need to use the html2canvas library perse)
It's is not (yet) possible to rotate objects without the use of css.
Some browsers (e.g. Firefox, Safari, Chrome) have there own transform
tag which is explained here:
http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html
.transformed {
-webkit-transform: rotate(15deg) scale(1.25, 0.5);
-moz-transform: rotate(15deg) scale(1.25, 0.5);
-ms-transform: rotate(15deg) scale(1.25, 0.5);
transform: rotate(15deg) scale(1.25, 0.5);
}
Extra:
for images you could use the jquery rotating plugin:
https://code.google.com/p/jqueryrotate/
for other object rotations this may be a possible solution but I don't have any experience with it:
http://coursesweb.net/javascript/rotate-html-objects-div-span-image-jquery_t
Related
I'm in the middle of working on a website, and the homepage is a jquery-based carousel that I took from here and modified heavily for the specific way I needed it to look for the site. The problem is, I've had to manually define the positions of each carousel item to center them properly around a circular background for every screen resolution that the site is viewed on in the CSS, like this:
#media (device-width: 1680px) {
.flipster-carousel .flip-past {
-webkit-transform: translateX(-22%) translateY(-15%) translateZ(0) scale(0.30);
-moz-transform: translateX(-22%) translateY(-15%) translateZ(0) scale(0.30);
-o-transform: translateX(-22%) translateY(-15%) translateZ(0) scale(0.30);
-ms-transform: translateX(-22%) translateY(-15%) translateZ(0) scale(0.30);
transform: translateX(-22%) translateY(-15%) translateZ(0) scale(0.30);
}
}
I can tell that this definitely isn't the best way to do this, and it's a very hacky method. The big problem that I've discovered with doing it this way is that if the browser window on the computer isn't full screen, the carousel elements will be shifted and off center from the rest of the site. I absolutely have to fix this so that the carousel will stay centered with the rest of the page when the browser window is resized, but I don't even know where to begin with coding that. Can someone point me in the right direction or give me some advice for what to do? The site I'm working on is located here. Thanks!
margin-left/right:auto fixed it.
The following display issues occurs in Chrome (Version 39.0.2171.95 dev-m)
It has been observed on several Windows PCs and on a Mac.
There seems to be two culprits which can cause this, a slideshow component using Slick.js and a flash animation. I have updated Slick.js to no avail.
The content display will cut off at the same place regardless of where the component is positioned. The position appears to be fixed from the top of the page, not relative to the size of the browser.
The hidden content below will appear in blocks as you move your mouse over the area. Resizing the browsers or highlighting the text on the page will also clear it.
Whilst the bug is still live you can view it here
http://sci.esa.int
Any thoughts?
If I break slick.js by removing the js - then the Twitter component does not cause the bug.
If I remove the flash or the twitter component from the page, the bug does not occur.
I found a resolution
html{
-webkit-transform: translate3d(0, 0, 0);
}
As per another comment though I have added this code
html *:not(svg) {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0); /*only in IE10*/
}
Chrome redraw issue
Although another comment suggests it can have drawbacks
I am having some animation issues that I've determined are caused by overloaded CSS Transitions (or a slow computer) on Chrome.
I'm curious if there are any alternatives to CSS Transforms to rotate elements? (I am simulating a watch dial rotating based on scroll position.)
There is no other way to do rotation with html elements. Only with css transforms, you will accomplish this.
What you can try to add more performance is to use rotate3d to activate hardware acceleration.
Example:
transform: rotate(30deg); // 2d rotate
transform: rotateZ(30deg); // 3d rotate
You can check more info on 3d transforms in this article: http://www.sitepoint.com/advanced-css3-2d-and-3d-transform-techniques/
I'm getting tired to trying to rotate the column text from a table in html.
This is what I have, it just works in chrome and Firefox, but not in IE9.
http://contoso2.azurewebsites.net/scores/listscores
I was seeing these examples about the vertical text. I'm using IE9 and it looks good, I supposed they are using something like a canvas, I really not sure.
http://jsfiddle.net/R4JvP/11/
http://www.ok-soft-gmbh.com/jqGrid/CheckboxesWithVerticalHeaders1.htm
The second link is what I'm interested show all the header columns in rotation: (-90)deg How can I implement this in all browsers?
You could use -ms-transform: rotate(-45deg);
-moz-transform: rotate Firefox 4+
-webkit-transform: rotate Safari 5+, Chrome 10+
-ms-transform: rotate Internet Exlorer 9+
transform: rotate
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