Is it possible to specify the rotation point when rotating a HTML element?
For example: if a HTML div has the left, top, width, height attributes: 0,0,100,100. The rotational point(the point we rotate the div around) will be 50,50(the midpoint). But I want to change the rotational point to 0,0.
I am rotating using the CSS 'transform' attribute:
#myDiv {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
/*Can I specify the rotational point???*/
transform: rotate(45deg) rotation-point:0px 0px; ??
}
There is a way to do it using the CSS 'rotation' attribute but W3Schools says that isn;t supported by major browsers:
rotation: 45deg;
rotation-point:0px 0px;
Yes, use the transform-origin CSS3 property.
http://www.w3.org/TR/css3-2d-transforms/#transform-origin-property
Related
I would like to change the event shape from a square to a parallelogram, see image below for an example:
I tried changing the CSS
.fc-event-container{
background-color:rgba(2,2,2,0.9);
float:left;
Skew
-webkit-transform: skew(-60deg);
-moz-transform: skew(-60deg);
-o-transform: skew(-60deg);
transform: skew(-60deg);
}
But it distorted the event container, see image
Using info from here How to skew element but keep text normal (unskewed)
.fc-content {
Skew -webkit-transform: skew(60deg);
-moz-transform: skew(60deg);
-o-transform: skew(60deg);
transform: skew(60deg);
}
Seems to work
https://jsfiddle.net/qjLs3tfa/
The float: left may cause it to shrink the event though as seen in month view in fiddle
My Velocity.js animation is being reverted to stylesheet defined values after completion by removing style attribute. I've checked all in docs, there isn't anything that gives me a clue.
Simple enough, span is styled like this:
.csstransforms3d #naslov h1 span{
display: inline-block;
-webkit-transform: perspective(400px) rotateX(90deg);
-moz-transform: perspective(400px) rotateX(90deg);
-o-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
}
and animated with this:
$.Velocity.hook( $('#naslov h1 span') , "rotateX", "90deg");
$('#naslov h1 span').velocity({rotateX:'0deg'},3000)
I'm watching my animation in dev tools. Everything goes fine, transform: rotateX is gradually lowering it's value in style tag of a span and - boom, whole style tag is gone once rotateX reaches 0;
Does anyone know what's going on here?
If I'm not mistaken, the default behavior of Velocity is to remove transforms with null-like values, see here.
The problem is that your end value is 0deg which is the basically a null rotate transform.
Not sure this will work, but I think if you simply add 360 to all values you could trick the system into not cleaning the transform:rotateX at the end.
Update:
As per #Miloshio's comment it's better to add 0.01 to all values instead of 360 (not tested).
Front-end developers have little recourse but to use css transform: translateY(-50%) with top: 50% to vertically center elements of variable height. I'm doing this for a slide show of images that I want to be able to zoom in on. I've been trying to animate this using transform: scale(x) but of course any transform values applied to an element will overwrite any other ones that came before. So, to preserve transform: translateY(-50%) value while also running animate( transform: 'scale(2.5)' )I've instead run animate( transform: 'translateY(-50%) scale(2.5)' ). However, in all cases I've noticed that same curious result. The first time I trigger the animation it simply resets the translate values to nothing, and then on subsequent runs it toggles the following transform values on and off:
first state:
-webkit-transform: translate(0px, -50px) rotate(0rad) skewX(0rad) scale(1, 1);
second state:
-webkit-transform: translate(0px, -125px) rotate(0rad) skewX(0rad) scale(2.5, 2.5);
On thing that's clear is my reset translateY value somehow gets reinterpreted to pixels before being multiplied by the same factor as the scale.
Here's the code. For a little more content, the slideshow has a property draggable that I am toggling on and off in concert with enabling the zoom since I think having them work simultaneously would be terrible for UX.
$('.activate-zoom').click (e) ->
if $('.slideshow-products').slick('slickGetOption', 'draggable')
$('.slideshow-products').slick('slickSetOption', 'draggable', false).slick('slickSetOption', 'swipe', false)
$('.products .slick-active img').animate( 'transform': 'scale(2.5) translateY(-50%)')
else
$('.slideshow-products').slick('slickSetOption', 'draggable', true).slick('slickSetOption', 'swipe', true)
$('.products .slick-active img').animate( 'transform': 'scale(1) translateY(-50%)' )
What can I do to prevent the image from first reseting its translateY value, remaining vertically centered, and then zooming given that y-axis baseline.
I have a site with a fixed navigation bar that should scroll with the page. When I add a JS Google Map, the nav bar no longer moves:
http://amosjackson.com/map/index.html
Also, the problem only occurs when the map is absolutely positioned.
Add translateZ to the fixed element
-webkit-transform: translateZ(0);
I found out while analysing the whole google map canvas. The API adds also a
-webkit-transform: translateZ(0) to the map. this breaks many browsers in painting the fixed elements correctly.
In addition the fixed element could also need other related visibility properties like z-index and opacity.
A working solution: (I always put my map canvas into a container)
.my-fixed-elem {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
z-index: 500 // adapt for your project
opacity: 1 // some times you can remove this
}
.map-canvas-container {
width: 100%; // somewidth
height: 750px; // someheight
position: relative;
z-index: 18;
top: 0;
left: 0;
}
#map-canvas-contact {
width: 100%;
height: 100%;
}
Best regards
remove the z-index from the google maps div and also give it an opacity value such that the text becomes visible.. play around with them..
hope that helps..
It is some sort of webkit bug related to the "transform" css setting that is added to the outer maps element. The transform:translateZ(0px) is added in a style attribute, but does not need to be in there, removing it has no effect.
So the answer is to add a css line to the page and use the !important flag so it will override the style attribute's setting.
<style>
#map-canvas[style] { -webkit-transform:none !important; }
</style>
Note, the [style] part makes it only take effect if google adds the style attribute, and the #map-canvas may need to be changed to match the element you sent to google.maps.Map()
I am creating a simple game.
I want to use jQUERY to rotate the joints making it move. I am using .animate ( http://api.jquery.com/animate/ ) to animate CSS properties but if it is also possible to use Javscript, I can make my own custom code.
More TO-THE-POINT
How do I rotate images in CSS or Javascript? I prefer CSS but Javascript is fine too.
If it is impossible (which I am pretty sure it is but I am not giving up yet) is there any other possible way to do what i am trying to do without making a bunch of seperate images, each rotated a different way.
Or can anyone at least give me an example of a site that does something similar.
EDIT: I need 1 CSS property (no -something: rotation(500deg);) that works with FireFox, Safari and Chrome because those are the only browsers I really work with.
Firefox and the Webkit browsers support a "transform" CSS property ("-webkit-transform", "-moz-transform"). Those can do all sorts of interesting things. There's a very weak IE tool that allows very limited rotation, so it's not really an option for something like a game.
Here's a demo page I made for another Stackoverflow question a few days ago: http://gutfullofbeer.net/compass.html
As shown in the image above
1) is -90 degree or 270 degree rotation
2) is +90 degree rotation and
3) is 180 degree rotation.
Note :- The quadrant containing blue square is the original image position in web browser when displayed with img tag. This is the only visible section to developer in web browser. On rotation of image from its top left point it will switch to the invisible quadrant. Hence it is very very important to use translateX and translateY property along with rotate property in css to drag the image from invisible quadrant to visible quadrant to display it on web browser. Please refer to css transform property for more info.
The css for the same is as below
.image_rotate_270 {
transform-origin: top left; /* IE 10+, Firefox, etc. */
-webkit-transform-origin: top left; /* Chrome */
-ms-transform-origin: top left; /* IE 9 */
transform: rotate(270deg) translateX(-100%);
-webkit-transform: rotate(270deg) translateX(-100%);
-ms-transform: rotate(270deg) translateX(-100%);
}
.image_rotate_90 {
transform-origin: top left; /* IE 10+, Firefox, etc. */
-webkit-transform-origin: top left; /* Chrome */
-ms-transform-origin: top left; /* IE 9 */
transform: rotate(90deg) translateY(-100%);
-webkit-transform: rotate(90deg) translateY(-100%);
-ms-transform: rotate(90deg) translateY(-100%);
}
.image_rotate_180 {
transform-origin: top left; /* IE 10+, Firefox, etc. */
-webkit-transform-origin: top left; /* Chrome */
-ms-transform-origin: top left; /* IE 9 */
transform: rotate(180deg) translateX(-100%) translateY(-100%);
-webkit-transform: rotate(180deg) translateX(-100%) translateY(-100%);
-ms-transform: rotate(180deg) translateX(-100%) translateY(-100%);
}
Now use this class names inside the class property of img tag.
<img src="xyz.jpg" id="image" class="image_rotate_90"/>
For rotation of -90 and +90 you will sometimes need to alter its height and width either with screen resolution or with original image resolution so that image will retain its original shape. Do it using javascript inside the body tag after image is loaded.
<script>
document.getElementById("image").width = screen.height;
document.getElementById("image").height = screen.width;
</script>
Suppose your original image is of 640 X 480 resolution. i.e. width = 480 and height = 640. So when you rotate the image, it becomes a image with resolution 480 X 640. So to retain its original shape. You can do the following under body tag after image loaded .
<script>
document.getElementById("image").width = 480px;
document.getElementById("image").height = 640px;
</script>
Some browsers support this:
Rotate That Image with CSS
Not a full answer, but in case it's helpful here's a fun little bookmarklet I have in Safari (works in chrome as well) that will cause the page contents to rotate:
javascript:(function(){var%20d=0;setInterval(function(){document.body.style['-webkit-transform']='rotate('+%20d%20+'deg)';d+=1},10)}());
I figured it might be helpful to see an example usage.
Not ideal, but you could make separate image files for each rotated state of the image, then use JavaScript to change <img src="XXX" /> or CSS to change background-image: url('XXX'); Once the images have loaded (you could even pre-load them with JS), the animation between them should be very fast.
Have you ever tried: http://jqueryrotate.com/ ??
Works great in all modern browsers including IE>=6