Solucionado
Olá, estou fazendo o curso de HTML + CSS (Barbearia Alura), e na pagina de Produtos temos 3 elementos com borda em cada um. Eu gostaria de saber como posso aplicar a função rotate apenas na borda desse meu elemento.
Tentei aplicar no :hover mas não acontece nada com meu elemento
.menu-produtos li:hover {
border-color: #d19a13;
transform: rotate3d(0, 1, 0, 360deg);
}hoje, com a Alura e o Google Gemini
Oi, Marilia, tudo bem?
Acredito que não entendi muito bem, você deseja que os elementos do produtos sejam rotacionados de forma 3d? Dessa forma? https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_flip_box2
Oi Laís, então vamos imaginar que esse teu bloco tem um border solid em todo ele, eu queria saber se é possível fazer com que somente esse border tenha a rotação 3d
Oi, Marilia!
Certo! E o conteúdo de dentro do border ficasse sem se mover dentro da rotação3d? Sim, nesse exemplo acima, adaptei:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner {
transform: rotateX(180deg);
border: 1px solid tomato;
}
.flip-box-front, .flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
</style>
</head>
<body>
<h1>3D Flip Box (Vertical)</h1>
<h3>Hover over the box below:</h3>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
</div>
</div>
</div>
</body>
</html>
Pode copiar e colar e apertar no botão run.
Qualquer dúvida, é só falar!
Oi Laís, perfeito era isso mesmo muito obrigado!