# Zoom In and Zoom Out Functionality in CSS **URL:** \ **Category:** Ignition\ **Tags:** ignition81, perspective, scripting\ **Created:** [March 25, 2024, 9:32am UTC](https://forum.inductiveautomation.com/t/zoom-in-and-zoom-out-functionality-in-css/87820 "2024-03-25T09:32:20Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![HYEONSOO\_LEE](https://avatars.discourse-cdn.com/v4/letter/h/3be4f8/32.png) [@HYEONSOO\_LEE](https://forum.inductiveautomation.com/u/HYEONSOO_LEE)\ **Post date:** [March 25, 2024, 9:32am UTC](https://forum.inductiveautomation.com/t/zoom-in-and-zoom-out-functionality-in-css/87820/1 "2024-03-25T09:32:20Z")
![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/d/edb408953e402be931d9b1c87ffd927dd033244e.png) 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. ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [March 25, 2024, 9:45am UTC](https://forum.inductiveautomation.com/t/zoom-in-and-zoom-out-functionality-in-css/87820/2 "2024-03-25T09:45:47Z")
I don't understand the problem. What is "window"? > [@HYEONSOO\_LEE](#): > > The screen resolution is 9600 × 5200 ... By "screen" do you mean "monitor" or "Perspective view" maybe? ---
**Author:** ![HYEONSOO\_LEE](https://avatars.discourse-cdn.com/v4/letter/h/3be4f8/32.png) [@HYEONSOO\_LEE](https://forum.inductiveautomation.com/u/HYEONSOO_LEE)\ **Post date:** [March 25, 2024, 10:06am UTC](https://forum.inductiveautomation.com/t/zoom-in-and-zoom-out-functionality-in-css/87820/3 "2024-03-25T10:06:13Z")
yes it's screen or monitor ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [March 25, 2024, 10:20am UTC](https://forum.inductiveautomation.com/t/zoom-in-and-zoom-out-functionality-in-css/87820/4 "2024-03-25T10:20:59Z")
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"? ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [March 25, 2024, 2:32pm UTC](https://forum.inductiveautomation.com/t/zoom-in-and-zoom-out-functionality-in-css/87820/5 "2024-03-25T14:32:36Z")
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. ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [March 25, 2024, 2:43pm UTC](https://forum.inductiveautomation.com/t/zoom-in-and-zoom-out-functionality-in-css/87820/6 "2024-03-25T14:43:17Z")
Use this instead of struggling with your own: > [@Pan Zoom Container](https://forum.inductiveautomation.com/t/pan-zoom-container/75093): > > BIJC is pleased to announce its latest module, a Pan Zoom container for Perspective. There have been a number of outstanding examples of Pan Zoom using an XY container but these are very specific and generally require advanced scripting and CSS skills. BIJC container simplifies this process and allows the XY container to be responsive. In its simplest deployment, a developed XY container can be placed inside BIJCs Pan Zoom container and it will automatically fit to any screen size. If the deve…