Bottom yerine translateY kullanımının sebebi nedir?

TheBuliderBob · 27 Nisan 2025

Ben, bottom kullanarak bir 3D tarzı bir şey yapmayı planlıyordum ama bottom için transition eklememe rağmen hareket pürüzsüz olmuyordu. Bu yüzden translateY kullanmak zorunda kaldım. Peki bunun nedeni nedir?

"

HTML:

  <style>
    .ONE{
    background-color: green;
    border: none;
    border-radius: 2px;
    color: white;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 4px;
    padding-right: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: padding 0.3s, transform 0.3s, box-shadow 0.3s;
    position: relative;
    margin-left: 5px;
  }
  .ONE:hover{
   padding-right: 12px;
   padding-left: 12px;
 

  }
  .ONE:active{
    box-shadow: 1px 1px 12px 1.5px rgba(5, 153, 5, 0.717);
    transform: translateY(-1.5px);
  }
 </style>

<button class="ONE">
  ONE
</button>

Dianauri · 27 Nisan 2025

Transform: TranslateY(-1.5px) kullanman animasyonu pürüzsüz yapıyor, çünkü bu sadece görüntüyü taşıyor, sayfanın gerçek yerleşimini değiştirmiyor.
Bottom gibi şeyler tüm sayfanın düzenini etkilediği için performansı kötü etkiliyor.

TheBuliderBob · 27 Nisan 2025

Dianauri dedi:
Transform: TranslateY(-1.5px) kullanman animasyonu pürüzsüz yapıyor, çünkü bu sadece görüntüyü taşıyor, sayfanın gerçek yerleşimini değiştirmiyor.
Bottom gibi şeyler tüm sayfanın düzenini etkilediği için performansı kötü etkiliyor.

Sağol.

Bottom yerine translateY kullanımının sebebi nedir?

TheBuliderBob

Centipat

Dianauri

Picopat

TheBuliderBob

Centipat