[Solved] Center Element on Z-Axis in 3D Rotation

[GrantCuster]

I am trying to get the and in this codepen: http://codepen.io/GrantCuster/pen/Xbbaqx to stay exactly centered as the elements rotate around it on the x-axis. I think this will involve translateZ maybe? But I don’t understand how to conceptualize the 3D space created by ‘perspective’.

[GrantCuster]

I got it to work here: http://codepen.io/GrantCuster/pen/bddrjW by making the ‘and’ element as wide as the rotating element. I think the other way still should have worked but I will take this for now.

[gcyrillus]

hello, nice and interresting simple effect, i like it.

to sort your problem you could use text-indent :-xxem if only text matters and if text length is known.
http://codepen.io/gc-nomade/pen/YXyyoR
or left: calc(50% – xxem) if bg and edges of boxe matters and text length is known :
http://codepen.io/gc-nomade/pen/ZGbbde
or write an extra keyframe including translate just for this center element no matter text lenght/content, … many ways depending on fully effect expected :)

[Author]

Posts