Jump to content
Search Community

Emdedded £3 Space

iconofsyn test
Moderator Tag

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

I want to embed a transform-style: preserve-3d; 3D object inside another transform-style: preserve-3d; 3D object

currently i have the following HTML

<div id="cube">
                <figure class="front">1</figure>
                <figure class="back">2</figure>
                <figure class="right">3</figure>
                <figure class="left">4</figure>
                <figure class="top">5</figure>
                <figure class="bottom">6</figure>
</div>

each figure element is a face on the cube.
the id="cube" element has the transform-style: preserve-3d property.

If i place another transform-style: preserve-3d container inside one of the figure elements
1) will it still rotate with the cube in the same way any normal element on one of the cube faces would?
2) will it be possible to animate it in 3D in the same way i can animate the cube.

 

 

   

Link to comment
Share on other sites

7 hours ago, iconofsyn said:

I want to embed a transform-style: preserve-3d; 3D object inside another transform-style: preserve-3d; 3D object

currently i have the following HTML

<div id="cube">
                <figure class="front">1</figure>
                <figure class="back">2</figure>
                <figure class="right">3</figure>
                <figure class="left">4</figure>
                <figure class="top">5</figure>
                <figure class="bottom">6</figure>
</div>

each figure element is a face on the cube.
the id="cube" element has the transform-style: preserve-3d property.

If i place another transform-style: preserve-3d container inside one of the figure elements
1) will it still rotate with the cube in the same way any normal element on one of the cube faces would?
2) will it be possible to animate it in 3D in the same way i can animate the cube.

 

 

   


For my experience using 3d animations, what I do is set the perspective property of the wrapper of the desired animated element.
For your case it would be the cube element. (So set the perspective style property of its wrapper to ~600px)

Than for the animation it would work as expected, that is - using rotationX, rotationY for the cube element would also rotate the inner divs.

Peace
 

Link to comment
Share on other sites

6 hours ago, greenanimation said:


For my experience using 3d animations, what I do is set the perspective property of the wrapper of the desired animated element.
For your case it would be the cube element. (So set the perspective style property of its wrapper to ~600px)

Than for the animation it would work as expected, that is - using rotationX, rotationY for the cube element would also rotate the inner divs.

Peace
 

Yes
i know that rotating the cube element would rotate the inner divs with the cube
but it i placed another 3D space inside on e the the cube faces
would this rotate with the cube element whne it is rotated
will it rotate on its own (with all of its child objects) when it is rotated 

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.
×
×
  • Create New...