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.
Related
I don't get why this is happening:
I have:
https://jsfiddle.net/d5jehq02/1
<div class="para_group">
<div class="para_layer para_layer_back">
<h2>background</h2>
</div>
<div class="para_layer para_layer_front">
<h2>forefront</h2>
</div>
</div>
I am trying to create a parallax scrolling effect and although the 2 parent layers (class='para_group') have position='relative', still onr of the child divs - specifically seems to overlap its parent layer...
If you see the example link above, you will realize that the background layer from the 2nd group - seems to overlap the first group all together - when it shouldn't - the group's position is set to relative - therefore block objects (the parent divs) should appear one below the other...
I cannot get my mind around this one :(
The relativity of the conventional html positioning in here is seriously disturbed by the fact that the layer_back elements AND layer_front elements are actually moved into 3d context and scaled.
To achieve the parallax effect, what is done in here is:
Setting 1px perspective (camera set 1px away from the rendering plane).
.parallax {
perspective: 1px;
}
Moving the background layers 1px deeper into the field of view while at the same time scaling them to be twice as large.
.para_layer_back {
transform: translateZ(-1px) scale(2);
}
^ This is the heart of the parallax effect, as moving the elements 1px deeper when we have perspective set at 1px, positions the elements twice as far from the camera as the front layers which are translateZ'd by 0. This produces the parallax effect while scrolling, but also makes the elements appear smaller, because they're further away (the perspective effect).
That's why they are scale(2)'d so they appear in their original size.
Thing is, they're moved away from the camera without changing their relative positions (they're right next to each other then), and then they're scaled in-place, the scale operation having transform-origin set at their centers, makes them get larger and overlap each other.
What you could do to solve the problem is to work on first moving them away from each other before scaling them.
Take a look at the forked and updated fiddle where I've removed the "scale(2)" part on the back layers, they are in the back, and they are positioned properly (without overlapping).
http://jsfiddle.net/3x150vsx/1/
.para_layer_back {
transform: translateZ(-1px) scale(1);
}
The solution to your problem lies in moving them away from each other before you try to scale them up.
Good luck :>
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!
I have this:
div {
transform:rotateX(120deg);
}
But when I make the transformation it leaves me a white space over the div. How can I make the div to stay at the top.
Pretty sure you are looking for transform-origin.
Something like transform-origin: 0% 33%; works in your case.
jsFiddle here - play around with it.
By default, the origin is set to 50% 50%.
See MDN documentation.
To change the rotation point of an element, you can use transform-origin.
Browser support is limited, and prefixed, so check in here for some more information:
(it will only work in chrome and safari for 3D transformations like this, I believe)
http://www.w3schools.com/cssref/css3_pr_transform-origin.asp
Here is an example:
http://jsfiddle.net/zAZuY/1/
notice how the second div sticks to the top. Also, take note that a 120 degree rotation will begin to flip your element upside down if the origin point is at the top (you are actually seeing the backside of the element at this point)
Something like:
div {
transform:rotateX(120deg);
transform-origin:top left;
}
Best way to grasp this is to pretend the DIV is a piece of paper and you're sticking a nail onto the top left hand side of the paper. Now since you're flipping the paper on the X axis, it uses the top of the paper as the folding point and turns itself around that area.
Remember to declare both the "webkit" and "ms" versions of "transform" and "transform-origin" in your CSS since the vanilla statements haven't been universally adopted yet.
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.
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.