Rotate tiles to form a complete cylinder-like shape

[Dr3am3rz]

Hi guys,

 

I wanted to do something like sort of split 1 whole image and rotate by individual columns and eventually form a cylinder shape and make it spin.

 

So far I have managed to split and rotate them to form sort of cylinder shape but somehow it doesn't look complete.

 

I have tried rotating differently but still unable to get it to look like a complete shape.

 

I have to include a hidden image so that you guys can view the image at a certain angle, not sure why. It's working with a few images but not only 1 image.

 

Thanks for the help in advance!

 

See the Pen LkdYgL by Dr3am3rz (@Dr3am3rz) on CodePen

[Carl]

hmm. i'm not really sure this question has much to do with GSAP. Seems like the problem centers more around what CSS values you need to set.

My suggestion would be to study examples like this: http://cssdeck.com/labs/wrap-image-in-3d-cylinder-2 and try to re-use some of the positioning code. FWIW getting the images to animate from a grid into a cylinder is quite advanced, could take quite a bit of time and experimentation to get it right. unfortunately that isn't the type of thing we can easily do for you.

[Jonathan]

Hello,

 

You can see here in my example that it is basically a image carousel, with no gaps between the tiles to make a hexagon:

 

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

 

Here is my original GSAP carousel that i modified to create the above hexagon

 

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

 

[Dr3am3rz]

Thanks Carl for the suggestion!

 

Thanks Jonathan for the example you have created!

 

Will take a look at it when I have more time, ask you again if I have any questions! =D