Zoom In and Zoom Out Functionality in CSS

Ignition
, ,
1

image
image1661×621 12.6 KB

Hello

I'm planning to implement a zoom-in and zoom-out feature using CSS's transform property. The screen resolution is 9600x5200, and when using transform's scale to zoom in and out, the position of the component shifts due to the pivot point's location, necessitating screen movement.

Do you have any ideas on implementing zoom functionality that focuses on the position of a certain pointer? Should the component's position be offset every time it's zoomed in or out?

When using CSS ZOOM, it also zooms in and out from a specific point, so I think I need to implement it using the transform scale, but I can't come up with a good idea.

2

I don't understand the problem.
What is "window"?

By "screen" do you mean "monitor" or "Perspective view" maybe?

3

yes

it's screen or monitor

4

  1. It's still not clear.
    The Perspective view is 9600 × 5200?
    or
    The monitor is 9600 × 5200? (Wow!)

  2. You didn't answer: What is "window"?

5

You are going to have a very frustrating time trying to implement this without a custom component.

I would suggest looking on the Ignition Exchange to see if anyone else has already made something close enough to this available for your to use.
Otherwise, every single step of this will be uphill.

Also, we have plans for a first party "spatial" container, though no earlier than 8.3.

1 Like
6

Use this instead of struggling with your own:

2 Likes