• Resolved burnuser

    (@burnuser)


    Hi, I’m experiencing problems in using perspective.

    Something works as expected, means a rectangle is visually 3D converted into a trapeze and translate Z resizes the result +/-

    • Box and DIV Container with predefined Block classes like “Perspective and shadow”
    • DIV Container
      Local Styles => CSS Transitions => Transform +
      Perspective (e.g. 400) + Rotate X (e.g. 30) + Translate Z (e.g. -100)

    But in other cases there is no expected 3D transformation (no trapeze and no scaling effect):

    • DIV Container
      Local Styles => CSS Transitions => Transform +
      Rotate X (e.g. 30) + Translate Z (e.g. -100)
      + using the predefined “Perspective” Input field below
    • Box Container and Image Advanced Block
      Tab Advanced => CSS Transform and transitions
      Perspective (e.g. 400) + Rotate X (e.g. 13) + Translate Z (e.g. -100)
      (And “Preserve 3d” yes/no does not change anything.)

    So , what I’m doing wrong?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Illia Sanz

    (@illiagreen)

    do you know that perspective option (if you use it as not part of transform option) is working for children and not for block itself?

    Thread Starter burnuser

    (@burnuser)

    I tried everything: Image or Text in Box container, the results are as stated above.

    And, if this is relevant for this case, I’m using the free Greenshift plugin from WordPress directory without any (Animation) Extension Pack.

    So, please, tell me what to do, if I want to use the perspective option in a Box Container with an image or text block inside, in Tab Advanced => CSS Transform and transitions: …

    Plugin Support Illia Sanz

    (@illiagreen)

    please provide link

    Thread Starter burnuser

    (@burnuser)

    Finally I got it.

    But it is really tricky and I recommend to add some hints in Greenshift documentation and/or within the plugin user-interface:

    • 3D View with Advanced => CSS Transform and transitions needs a block stack
    • Use Parent Box / DIV Container block for Perspective setting
    • Use Child block for CSS Transforms like Rotate X and Translate Z
      • Attention 1: If Parent block is a Box container, Transformation of child blocks is not shown with perspective view in the editor, only in webpage preview!
      • Attention 2: If direct child block is an image (e.g. Image Advanced block), Perspective view does not work anyway on this image!
        Instead you need a 3 block stack to add Perspective to an image:
        Box / DIV Parent Container => Box / DIV Child Container => Image block

    I tried it with child blocks before, but struggled with the above stated special conditions, which are not obvious anyway, because the present user-interface allows/suggests adding perspective and transformation settings all at once.

    Plugin Support Illia Sanz

    (@illiagreen)

    It’s not question of Greenshift because this option is css option and it has some peculiarities so it’s more for advanced usage. Even if you don’t know CSS, we have AI helper integrated in plugin and it can make such type of job quite good

Viewing 5 replies - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.