The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #201445

    I am trying to get the and in this codepen: 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’.


    I got it to work here: 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.


    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.
    or left: calc(50% – xxem) if bg and edges of boxe matters and text length is known :
    or write an extra keyframe including translate just for this center element no matter text lenght/content, … many ways depending on fully effect expected :)

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.