Jump to content
GreenSock

erikb

css3d to make perpendicular planes?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Having trouble bending css3d to my whims, even with greensock help.

I want to put a #wall around the top edge of a #floor div (actually want to put walls over the #floor, but starting with a back wall).

 

As you can see in my pen, I've got the floor laid down nicely, and the wall in (roughly) the right place, but I cannot get the right combination of css magic to make the #wall stand upright on the #floor. 

 

Click the #floor to give the house a spin to see how my 3d skills are lacking.

 

Could someone point me in the right direction with my barn raising?

See the Pen PZjWdR by jedierikb (@jedierikb) on CodePen

Link to comment
Share on other sites

This takes more knowledge how CSS perspective and transforms work than how GSAP itself works. I think it'd be wise to read up on them a bit https://desandro.github.io/3dtransforms/docs/perspective.html

 

The approach I would use is to build the 3D effect in pure CSS then if you want to animate it with GSAP you can. Depending on the complexity of the animation you want, you may not even need GSAP.

 

The basic CSS approach is: rotate the wall to the angle it needs to be, translate it by half the distance of the floor beneath. This is granted that the environment is setup correctly including

transform-style: preserve-3d;

on the parent and perhaps a set perspective.

 

The "half the distance of the floor beneath" is the red part in the (poorly drawn) diagram below.

 

CwsOFUT.jpg

  • Like 4
Link to comment
Share on other sites

Im not near my computer right now, but by the looks of your markup.. you should separate the floor and wall from being nested.

 

Build it like you would a cube. Have one parent that could be your home div. with position relative; and then you would have the floor and the wall as nested children.

 

Kind of like this:

<div id="house">
  <div id="floor"></div>
  <div id="wall"></div>
</div>

Then you would rotate and translateZ (z) the elements in place. Also you can use transformOrigin to position each face half of their width and height.

 

See my example for a cross browser 3d cube in GSAP for how to setup a 3d cube. Animates each face separately for a preserve-3d workaround.

 

See the Pen FEbzA by jonathan (@jonathan) on CodePen

 

And this forked example that just comments out all but the bottom (floor) and back (back wall) faces

 

See the Pen xZrqEd by jonathan (@jonathan) on CodePen

 

The link that ZachSaucier posted is a good link.. but the way Desandro makes his 3d cube will not work in IE10 and above due to IE not supporting transform-style:preserve-3d. So you must use transformPerspective like your already doing, instead of perspective. And nest your faces under one element. And most importantly, you must animate each face separately, not the parent. You will have to adjust somethings to get it to work with GSAP. Since GSAP preserves the order of operations within the transform function for performance, which is a great thing so your animations and transforms work consistently cross browser ;)

 

Hopefully this gets you close, until i have time to get to my desktop computer. But basically you will make a 3D cube without all the faces, only leaving the bottom face and back face.

 

:)

  • Like 6
Link to comment
Share on other sites

 

The link that ZachSaucier posted is a good link.. but the way Desandro makes his 3d cube will not work in IE10 and above due to IE not supporting transform-style:preserve-3d. So you must use transformPerspective like your already doing, instead of perspective.

 

I believe that Edge and above supports it https://dev.windows.com/en-us/microsoft-edge/platform/status/csstransformspreserve3d but not IEs

Link to comment
Share on other sites

Yep Edge now supports transform-style preserve-3d, but it is still buggy and behaves intermittently. So its best just to animate each face separately, and use transformPerspective instead of perspective, so you can still support IE11. Since IE11 will still run along side MS Edge on Windows 10. :)

  • Like 2
Link to comment
Share on other sites

jonathon, thank you for your demonstration.  Very informative!!  I have to support ie-11, so, alas, preserve-3d is not an option.  Which is a bummer.

 

I've done a bit of hacking on your example to complete my understanding, but am not getting very far.  I want to draw a triangle on the bottom plane, and then I want to animate extruding the sides of the triangle.  

 

PYOZxth.jpg

 

In this sketch, I've tried to  move the back face of the triangle to one of the other sides, but cannot seem to place it correctly.

See the Pen vLZppa?editors=001 by jedierikb (@jedierikb) on CodePen


 

Suggestions?  Much thanks.
Link to comment
Share on other sites

This seems like an interesting CSS challenge and I'm not really sure how much GSAP is going to help in this regard.

Its going to get tricky pretty fast if preserve-3d can't be used. 

 

Google Web Designer has some 3D support. It lets you spin / translate divs in 3D space. It might be worth a shot starting out there. 

  • Like 1
Link to comment
Share on other sites

To make a backface which is square and make it a triangle, you will have to use the border CSS property for each face. And the face doesnt use a background color but is made up of a border for each face and color.

 

Here is a quick example i just made showing a 3D Pyramid / Polyhedron, animated with GSAP

 

See the Pen NxvvQW by jonathan (@jonathan) on CodePen

 

Keep in mind unlike my 3D cross browser cube above, this 3D pyramid will not be 3D in IE due to non support of preserve-3d. i just made it real quick so you can see the concept. I will have to rework this so i animate each face separately, so i can get this to work in IE due to not supporting transform-style preserve-3d.

 

But like Carl said this is more of CSS challenge using different CSS techniques to make it 3D and to work in IE. GSAP is what drives the animation, But the initial setup is CSS, and has to follow a specific markup and order of CSS transforms to build. Its tricky but takes some time to get it right.

 

:)

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×