3d transform columns

[franticape]

Hi guys, i’d like to know what classes do i have to edit if i wanted to create a 3d column with perspective.
I’d like to create something like this: http://prntscr.com/j15ag1

in theory, i’d just need to add perspective and rotateY variables in the transform parameter. i can rotate the column but can’t add perspective to it. i tried adding it to the parent first with no success, then i tried with the child (the actual element i want to translate) with no effect either.

I suppose i must be missing a class or something. could you help me find it?

Thanks!

[basanta]

Hi There,

Thanks for writing in!
The transform CSS is working fine in a column.

You need to give a separate class name to the columns and add your transform value there to make it similar to the screenshot.
I believe you know how to add the custom class name to a column? You can click on the customize tab of the column element in the builder, put your class name there.

Hope that helps!

Thanks

[franticape]

i was testing it with an ID (i only wanted one column to change for now) and i found out the issue was that i added perspective after the rotation, silly me!

problem solved

the code looks like this, for whoever wants to try it out as well:

.video-column1{
    -webkit-transform: perspective(100px) rotateX(10deg) rotateY(45deg) ;
  transform:  perspective(400px) rotateX(10deg) rotateY(45deg);
}

[jade]

Thanks for sharing.