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.
Related
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 was having an issue where I was attempting to rotate two halves of an image in opposite directions around the y-axis with these two animations:
#-webkit-keyframes first{
0% { -webkit-transform: rotateY(0); }
100% { -webkit-transform: rotateY(-90deg); }
}
#-webkit-keyframes second{
0% { -webkit-transform: rotateY(0);}
100% { -webkit-transform: rotateY(90deg); }
}
Despite the different values for the last keyframe, the two animations rotated in the same direction. Someone rightly pointed out that I needed to apply perspective to my containing space in order to make the effect function (note the checkbox that will apply and remove the perspective from the 3d space to demonstrate):
http://jsfiddle.net/eveQt/12/ - Chrome only
I am curious why this is. From MDN:
The perspective CSS property determines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.
From my understanding, perspective moves the viewer along the z plane, making the 3d effect more or less intense. What I don't understand is how moving along the z plane would affect the direction of rotation of an element in such a fashion. I would have thought that perspective would only affect how dramatic the effect is, and not the direction in which the element rotates.
Obviously, application of perspective is a required for the proper rotation direction of each half of the image in my example, but why?
Both halves are rotating correctly around the Y axis, in opposite directions. The trouble is, without perspective, they do not look like they are rotating differently.
Applying perspective in this case basically makes one side of the image larger than the other side, as it rotates around the Y-axis. If there is no perspective, both sides of the image remain the same size, regardless of the direction the image is spinning.
Have a look at the whole image rotating without perspective, and imagine it is rotating in one direction. Then close your eyes, and when you open them again, imagine it is rotating in the other direction. Magic!
In essence, I need to have my div transformed to position itself like the top side of this box (ignoring the radius border, logo, gradient, etc.)
In order to do so, I need to
Rotate the element to the proper angle, which I know how to do using transform:rotate(45deg). Example here. The problem with this is that there is no depth, it just looks like a rotated square because that's what it is. I want it to look like a plane that something could be set on
Add the perception of depth on the element, which I also know how to do using Craig Buckler's approach. Example here
Combine the two effects on the element at the same time. This is the part that I cannot seem to get correct
My basic code
/* HTML */
<div id='square'></div>
/* CSS (without any transforms) */
#square {
width:150px;
height:150px;
background:black;
position:absolute;
top:50%; left:50%;
margin-left:-75px;
margin-top:-75px;
}
I thought I could get the effect I'm looking for by simply combining the two, using
transform: rotate(45deg) perspective(300px) rotateX(25deg);
but I found it was not so. Example here. The problem with this one is that it still does the rotateX based on the original orientation of the element, not the rotated version. Thus, it does not have the proper effect
I thought I could make it take the rotated angle of 45deg into consideration for the rotateX if I applied the rotate(45deg) to a container element, but this was also to no avail. Example here
I have tried variations of these approaches but (of course) have yet to get the effect I'm looking for
Do you have any idea how I can properly achieve this effect?
The correct transform is
perspective(300px) rotateX(25deg) rotate(45deg);
You want the plane where the element is to be always facing you, so first of all you rotate in X. This sets a plane that at the bottom is near you and at the top is far from you, and you don't want this plane to rotate, so you can't place a rotation before it.
Once you have set this plane, then, inside it, you rotate the div.
Maybe this fiddle makes it more clear, hover the div to see the rotation plane.
Fiddle
Basically, instead of just the basic rotateY(180deg) method, I'm trying to combine it with a translateX transform so that the card looks like it's actually being picked up from the right side (left when flipping back) and then being laid back down on the "table" in its new orientation.
As you can see in the Fiddle, it has the right general motion, but for some reason the two faces are not in sync. I'm not sure what I'm doing wrong - I guess I'm just not spacial-geometrically incined XD
Any help sorting this animation out would be much appreciated!
I think that this is what you want:
updated fiddle
The trick is that the background needs another transform origin:
#tcb {
background:#030;
transform:translateX(-100%) rotateY(180deg);
-webkit-transform:translateX(-100%) rotateY(180deg);
z-index:0;
transform-origin:100% 50%;
-webkit-transform-origin:100% 50%;
}
The reason is that the angle of rotation is reversed, so that you need to flip it around the other border. (So, the origin at 100%). And now that you have changed, that, you need to readjust the offset (the translateX value)
I needed also to move the transform-origin for the foreground from the div (where it was set both for foreground and background) to the foreground div.
Given a square, how can I rotate it such as the element flips with its diagonal being the origin of rotation? I managed to flip it using:
-webkit-transform: rotateX(90deg) rotateZ(90deg) rotateY(-90deg);
you can see an example here
but this does not rotate on the diagonal axis. How can I achieve that? Basically what I am trying to achieve is that when the element rotates, its top right corner, and bottom left corner don't go out of place.. Thanks and sorry for my bad English/explanation :S!
It looks like I'm a bit late to the party, but
-webkit-transform: rotate3d(-2,1, 0,-180deg);
may give you the behavior you're looking for.
as you can see at this jsfiddle, a combination of matrix-transformation and scaling works. with a background-image the effect gets more obvious.
If I understand your problem correctly, you just need to add this:
-webkit-transform-origin: left bottom
If that isn't it exactly look here for information on how to change the origin of the rotation: https://developer.mozilla.org/en/CSS/transform-origin