Heei. I just trying to use transform: translateZ(value);. When I try like this https://codepen.io/bariq_dharmawan/pen/yEPaxw
I confused why translateZ(0px) still make something change on the element. Please, I need some explaination
On image above, the transparancy of background-color looks like reduced when I hover. I don't know why
Related
As you can see at the top part of the picture, there is a css line given to the element itself -> transform: translate3d(681px, 407px, 0px);
I would like to add a property scale to the transform but it just overwrites the translate3d
I know I can put these 2 after eachother like this: transform: translate3d(681px, 407px, 0px) scale(2); But I can't use this as the number in translate3d are random and there is no way for me of knowing them.
Is there any way I can still use the scale property without ruining the translate3d ?
That's sadly not possible using the transform property.
But you can use the standalone scale property for this, once it is supported by all major browsers. Browser support is really poor at the moment.
https://caniuse.com/mdn-css_properties_scale
I have to make an animation with css. A logo flying and enlarging into the front based on a curved path or parabola. I made a small sketch.
The logo is staring small top right, flying and getting larger and is ending left center.
Sketch
I found a lot of informations about cubic-bezier also cubic-bezier editors, but unfortnatelly I am not able to realize this.
The html
<div class="animation"><img src="logo.jpg"></div>
The css
.animation {
transition: all 500ms cubic-bezier(0.725, -0.385, 0.970, 0.465);
transition-timing-function: cubic-bezier(0.725, -0.385, 0.970, 0.465);
}
This was one (of several) trys but the logo isn't animated. Besides, if I understand it, that is only the path without scaling.
Where is my thinking error?
Thanks a lot & regards!
First, cubic-bezier is a timing function, not a "path" function. It's not going to accomplish what you are after.
Second, to accomplish what you desire, use the CSS3 matrix transition property in conjunction with a custom animation function with a custom step callback. Either that, or adjust CSS properties like top, left, height, and width directly with said animation function.
Good luck!
I've got an element which i'm trying to animate in. I want to do the animation in two steps, first scale and rotate a square in, and then widen the square. I start off by transform: scale(.1) rotateX(360deg); and animate to transform: none, which works well. But as soon as i (in any step) declare a height/width in the keyframes, the rotation stops working. It will still scale as it should, and the height/width properties are applied, but the rotation is skipped entirely.
Here is a Codepen to demonstrate the issue:
http://codepen.io/anon/pen/abDCK
As you see, there's no rotation going on in there, it just simply scales in. Now, scroll down in the CSS and comment out the height/width properties, and you'll see that the rotation now suddenly works.
I've tried different combinations of having/not having height/width declared in the normal selector (not in the keyframe), i've also tried putting the height/width declarations in different steps in the keyframes. No success.
I get the same result in both Firefox in Chrome. Is this the intended behaviour? If so, why? Are there any workarounds?
Something to do with the transforms in the keyframes not being balanced?. You need to add translateX(0deg) to either the 40% keyframe, of 100% keyframe, depending on where you want it.
http://codepen.io/anon/pen/lJKkD
I'd sure love it if somebody could explain the reason - but this is the "solution"
I am trying to execute two animations at once upon hover of a single div.
One animation is to scale an image to 50%. The other animation is to scale text from 0-100%, and move it up 10px from its original position.
I have successfully created the animation of the scaling image using the code below, but I am running into problems with coding the text animation.
-webkit-transform: scale(.5);
Here is the working scaling image animation on a JSFiddle:
http://jsfiddle.net/ZVScz/
How can I now implement the animation of the text scaling from 0-100% and moving up 10px?
Thank in advance to anyone who is able to help out!
You need to use the adjacent selectors CSS selector, elem1 + elem2 where elem2 is immediately after elem1 and they have the same parent.
I have implemented something to the effect at http://jsfiddle.net/ZVScz/1/ and you can now adjust the transforms to your liking.
If you have any questions feel free to ask.
Fred
Try using : #worksContainer:hover #worksText { ... }
Repleace ... with the animation you want for the text.
problem: i want to skew box than rotate it but what happens is that it gets rotated first and then skewed.
http://jsfiddle.net/74ehh/2/
see comment as i got it
As you can see this messes up the result so instead of box that's little tilted and rotated. I get box that is rotated and tilted which's hard to comprehend and not what i wanted.
i tried changing order like so..
transform: skew(30deg) rotate(30deg);
but that didn't work.
or could someone elaborate on how would i go about calculating skew if box is rotated.
So what can i do?
First about Order: it's from left to right. so in code...
-webkit-transform: skew(30deg) rotate(30deg);
it will get skewed first and then rotated.
what i was having trouble is that child elements were working with it...
what i found out is that it's actually that skew property is that is screwed (fortunately)?
to skew it doesn't matter how much parent of the element of the element itself is rotated to it north/top of monitor will always be 0degree.