Oi, Mateus!
Então, como a minha imagem está grande, usar o translate e o scale desse tamanho só deixou minha imagem mais estranha ainda, gigante!
O arquivo que veio no .rar (que gostaria muito que fosse .zip, pelo menos, diga-se de passagem) tinha 901 x 901 pixels... O da aula parecia menor no video!
Segue meu código, caso ajude:
HTML, parte do efeito true parallax:
<section class="produto">
<div class="produto__foto"></div>
<article class="produto__descricao container">
<h2 class="produto__marca">
GATITO
</h2>
<div class="produto__divisao">
<p class="produto__preco">
R$ 128,90
</p>
<h3 class="produto__nome">
GATITO PRO PLAN SENSITIVE SKIN & STOMACH CAT FOOD
</h3>
<p class="produto__texto">
The food you choose for your cat will help keep them happy, healthy, and feeling extraordinary. Help your cat be their best – inside and out – with the advanced nutrition of Gatito Pro Plan Sensitive Skin & Stomach formulas.
</p>
<p class="produto__texto">
When a cat has a sensitive stomach or irritable skin, it not only impacts which food they can eat, it can also affect their quality of life. Pro Plan Sensitive Skin & Stomach formulas are developed with specialized nutrition that promotes digestive health, healthy skin and a shiny coat.
</p>
<p class="produto__texto">
And because every cat is unique, we offer choices suited to their needs and preferences, such as options with salmon or lamb as the first ingredient, as well as lifestage and breed size-specific formulas.
</p>
<button class="produto__comprar">
COMPRAR
</button>
</div>
</article>
</section>
CSS das partes envolvidas na aula:
.produto {
display: flex;
height: calc(100vh - 4.25rem);
}
.produto__foto {
width: 40%;
height: 100%;
background-image: url(../img/produto-capa.png);
/* background-attachment: fixed;
background-size: 49rem;
background-position: -22% top; */
background-repeat: no-repeat;
background-size: cover;
background-position: center;
transform: translateZ(-100px);
z-index: -1;
}
.produto__descricao {
width: 60%;
padding-top: 3rem;
box-sizing: border-box;
color: var(--color-gray);
background-image: var(--color-white);
}
@import url(_reset.css);
@import url(_variaveis.css);
html {
height: 100vh;
overflow: hidden;
}
body {
font-family: 'Overpass', sans-serif;
perspective: 100px;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
.container {
padding-right: 2rem;
padding-left: 2rem;
}