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.
Related
So I have got a list of <div> elements.
I use JavaScript to change the contents of this list by inserting or removing elements according to filters, put in by users.
When inserting/creating a new <div> element, I use #keyframe animations to change the opacity from zero to one and give a little fade in from the left.
#keyframes fade-in-left {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
Everything is working perfectly fine but there is one crucial design problem:
What I want now, is a scale up animation. I can easily do that but the problem is that when inserting a new element, the elements in the list after it snap to the position at which they would be when the inserted <div> has completed scaling to 1.
The problem here is obviously the following: Changing the scale of a transform does not affect the positioning of the other elements. I would have to change the height. But I cannot do that, there is padding, margin etc.
So can anyone please tell me a solution to this problem? Thank you.
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).
I am trying to do a simple 2 sided cube rotation. After the rotation I want to click one of the sides and make the height increase, however the transition takes place from the middle, not top down (like height transition does normally) so I tried changing the transform-origin.
The other issue is, if I change this to 90deg, on mouse move, it triggers mouseleave and fluctuates between the two states, click event doesn't work properly then either.
.cube.active {
-webkit-transform: rotateX(89deg);
transform: rotateX(89deg); /* Text bleed at 90ยบ */
}
http://jsfiddle.net/w7y4N/27/
maybe it is better to remove the limitation of transition to transform:
just do:
-webkit-transition: .33s;
transition: .33s;
http://jsfiddle.net/w7y4N/30/
also you have two different transition times. one for the container of .33s and one for the height of the inner with 1s. so the outer is finished its height-transition and the inner is not finished and take place in the middle.
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
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