is there 3d cube rotation in GWD?

[Madhukar Thapa Magar]

i got an assignment of creating 3d cube banner like this

http://showroom.adform.com/media/preview/format/mraid-3d-cube/index.html

but my client wants it in google adwords specs. 

Can anyone help me on this?

[San Khong]

HI Madhukar,

We don't have a component that can do this.  However, you can do this in Google Web Designer using the gesture component and custom event/action to rotate the elements. I will try to make an example for you.

San

Google Web Designer team

[San Khong]

I shared a sample file that have the 3d cube and gesture component to swipe through the 4 images.  The images has transparent grids so you can see what's behind them. What we did in the file:

1. Set up the 4 elements so they are lined up side by side (snap to the side).

2. Rotate the side divs using 3D rotation in the properties panel, 90 or -90 deg depending on which side.  If you rotate an image, you might want to flip it by adding 180deg to it like in my image sample file, so 270 and -270 instead.

3. Drag the corner of the side element and hold the cmd/ctrl key to snap it to the corner of the front element.

4. For the back element, set the Z position to negative value of how much the width of the cube such as -200px in the image sample case. If it's an image and you want to flip it, set it to 180deg rotation.

5 Select all elements and select wrap to put them in a parent div.

6. Give the parent div an id such as cube.

7. In the properties panel of the parent div, set the Z position to -100px.

8. Select the parent cube div, in the CSS panel, click the Add rule plus button at the left bottom.

9. Add the following rule: 

#rule

transition

: 

transform 1s

;

10. Scroll down in the CSS panel to find 

transform-origin

:  and set it to be half the width as x, half the height for y, and negative half of the width for z, for the example because the width of the image is 200px and height is 150px, so it's 

transform-origin

: 

100px 75px -100px

;

11. Drag a Gesture component on stage and make it big to cover the cube div.

12. Change the Z position of the gesture to 200px so it's always on top.

13. Add the following event for the gesture:

a. Right click on gesture on stage and select Add event...

b. Select Gesture > Swipe left

c. Select Custom for action > add custom action 

d. Use the following custom code:

var cube = document.getElementById('cube');

window.gwd.rotation -= 90;

cube.style.transform = 'rotateY(' + window.gwd.rotation + 'deg)';

e. Add another event by select Add event... in the context menu of gesture

f. Select Gesture > Swipe right

g. Select Custom for action > add custom action

h. Use the following code:

var cube = document.getElementById('cube');

window.gwd.rotation += 90;

cube.style.transform = 'rotateY(' + window.gwd.rotation + 'deg)';

14. Switch to code view, find the code that contains the following: 

window.gwd = window.gwd || {};

15. Add the following code right below it and before the custom actions:

window.gwd.rotation = 0;

16. Preview and swipe left or right.

I'm sorry the steps are long and involved a little hand coding.  I've filed a feature request for 3d cube component but this should help you get started.

Hope it helps.

[swoopy.s...@gmail.com]

Hi,
Is it possible to make it responsive? The cube working when I set exact values for 3D transforms, but than it wont be responsive. Can you help me on this?

[chri...@gmail.com]

Hi Madhukar....

I saw your post and I have attached a couple of links to something that I've been working on. The idea came from a someone in Germany who devised the code to make the a 3d cube rotate in all plains via mouse control. I've also had the cube rotation being controlled via a midi input source.

Here's the original.....

https://storage.googleapis.com/cdtmp02/nexus/index.html

Here's the links that I constructed based on his tutorial.

https://storage.googleapis.com/cdtmp02/spinbox/index.html

https://storage.googleapis.com/cdtmp02/spinbox/indexbeta.html

Chris