# Rotacionar Imagens com um botão

**URL:** <https://community.latromi.com.br/t/rotacionar-imagens-com-um-botao/1809>\
**Category:** Ajuda & Suporte\
**Tags:** css, javascript, form\
**Created:** [Maio 4, 2026, 8:40pm UTC](https://community.latromi.com.br/t/rotacionar-imagens-com-um-botao/1809 "2026-05-04T20:40:10Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![JonasKRitter](https://community.latromi.com.br/letter_avatar_proxy/v4/letter/j/dfb087/32.png) [@JonasKRitter](https://community.latromi.com.br/u/JonasKRitter)\
**Post date:** [Maio 4, 2026, 8:40pm UTC](https://community.latromi.com.br/t/rotacionar-imagens-com-um-botao/1809/1 "2026-05-04T20:40:10Z")

</div>

Boa tarde, tudo certo?

Gostaria de saber se existe alguma forma de rotacionar uma imagem que está em ImageView em 90º? Existe algum JS pra isso?

---

<div class="post-metadata">

**Author:** ![daniel.giacomelli](https://community.latromi.com.br/user_avatar/community.latromi.com.br/daniel.giacomelli/32/1476_2.png) [@daniel.giacomelli](https://community.latromi.com.br/u/daniel.giacomelli)\
**Post date:** [Maio 5, 2026, 3:06am UTC](https://community.latromi.com.br/t/rotacionar-imagens-com-um-botao/1809/2 "2026-05-05T03:06:28Z")

</div>

Olá @JonasKRitter!

Para rotacionar uma imagem, basta usar o código abaixo em um **Arquivo CSS** do Formulário, substituindo `"foto"` pelo nome do seu campo `Image View`:

```css
div.fieldWrapper[data-field-name="foto"] img {
    transform: rotate(90deg);
}

```

Veja o resultado abaixo:

 ![image](https://community.latromi.com.br/uploads/default/original/2X/d/ddcf4622238f03ced1480560b732f4407e849d9e.png "imagem original") ![image](https://community.latromi.com.br/uploads/default/original/2X/6/659967bd3bcd09bffe8624f7b2b708b7ee11e9ac.png "imagem com rotação 90º")

Se você quiser rotacionar 90º a cada clique de um botão, terá que criar uma classe CSS para cada passo da rotação, assim:

```css
.rotacao-90 { transform: rotate(90deg); }
.rotacao-180 { transform: rotate(180deg); }
.rotacao-270 { transform: rotate(270deg); }

```

E então, adicionar este código na ação **Executar Código JavaScript** , no Procedimento associado ao evento Click do botão:

```js
// Localiza o elemento
const img = document.querySelector('div.fieldWrapper[data-field-name="foto"] img');

// Rotaciona a imagem 90º à direita
if (img) { 

    let className = img.className;
    
    if (!className) {
        // Começa com 90º 
        className = 'rotacao-90';
    }
    else {
        // Extrai a quantidade de graus do nome da classe
        let graus = parseInt(className.split('-')[1]);
        
        // Aumenta 90º 
        graus+=90;
        
        // Se chegou a 360º, zera
        if (graus === 360) className = '';
        // Senão, atualiza o nome da classe
        else className = 'rotacao-'+graus;
    }
    // Aplica a rotação através da classe CSS
    img.className = className;
}

```

---

<div class="post-metadata">

**Author:** ![JonasKRitter](https://community.latromi.com.br/letter_avatar_proxy/v4/letter/j/dfb087/32.png) [@JonasKRitter](https://community.latromi.com.br/u/JonasKRitter)\
**Post date:** [Maio 5, 2026, 1:28pm UTC](https://community.latromi.com.br/t/rotacionar-imagens-com-um-botao/1809/3 "2026-05-05T13:28:47Z")

</div>

A rotação está funcionando. Porém quando a imagem está em 90º, ela fica cortada:

 ![image](https://community.latromi.com.br/uploads/default/original/2X/9/97a91c78951ccbbb1d353a21946fdc1b5641b339.jpeg)

Ela carrega assim:

 ![image](https://community.latromi.com.br/uploads/default/original/2X/0/0035937b0ea6e7b5adf45674d1cdbfddc3f89042.jpeg)

No campo ImageView estou usando a opçaõ de redimensionar a imagem

---

<div class="post-metadata">

**Author:** ![Diego\_Ramos](https://community.latromi.com.br/user_avatar/community.latromi.com.br/diego_ramos/32/1819_2.png) [@Diego\_Ramos](https://community.latromi.com.br/u/Diego_Ramos)\
**Post date:** [Maio 6, 2026, 2:18pm UTC](https://community.latromi.com.br/t/rotacionar-imagens-com-um-botao/1809/4 "2026-05-06T14:18:22Z")

</div>

Olá @JonasKRitter!

Poderia verificar alterar o código Javascript para:

```js
// Localiza o elemento
const img = document.querySelector('div.fieldWrapper[data-field-name="foto"]');

// Rotaciona a imagem 90º à direita
if (img) { 

    let oldClassName = newClassName = img.classList.values().filter(c => c?.startsWith('rotacao')).toArray()[0];
    
    if (!oldClassName) {
        // Começa com 90º 
        newClassName = 'rotacao-90';
    }
    else {
        // Extrai a quantidade de graus do nome da classe
        let graus = parseInt(oldClassName.split('-')[1]);
        
        // Aumenta 90º 
        graus+=90;
        
        // Se chegou a 360º, zera
        if (graus === 360) newClassName = undefined;
        // Senão, atualiza o nome da classe
        else newClassName = 'rotacao-'+graus;
    }
    
    // Aplica a rotação através da classe CSS
    img.classList.remove(oldClassName);
    if (newClassName)
        img.classList.add(newClassName);
}

```

---

<div class="post-metadata">

**Author:** ![JonasKRitter](https://community.latromi.com.br/letter_avatar_proxy/v4/letter/j/dfb087/32.png) [@JonasKRitter](https://community.latromi.com.br/u/JonasKRitter)\
**Post date:** [Maio 6, 2026, 8:29pm UTC](https://community.latromi.com.br/t/rotacionar-imagens-com-um-botao/1809/5 "2026-05-06T20:29:51Z")

</div>

Deu certo agora! Obrigado pelo apoio