CSS küpünde RotateX düzgün çalışmıyor

Küp döndürme efekti oluşturmayı öğrendim. rotateX'u rotateY ile değiştirirseniz, küp Y ekseninin ortalanmasında döner. Ancak, rotateX bulunduğunda, küp, X ekseni ortalanarak dönmüyor. Küpün uygun dönüşünü nasıl uygularım?CSS küpünde RotateX düzgün çalışmıyor

#container { 
 
    perspective: 1000px; 
 
    perspective-origin: 0 0; 
 
} 
 
#cube { 
 
    position: relative; 
 
    top: 100px; 
 
    left: 100px; 
 
    width: 200px; 
 
    transform-style: preserve-3d; 
 
    transition: transform 2s; 
 
    transform-origin: 50% 50%; 
 
} 
 
#cube div { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
#front { 
 
    transform: rotateY( 0deg) translateZ(100px); 
 
    background-color: rgba(0,34,62,0.3); 
 
} 
 
#right { 
 
    transform: rotateY( 90deg) translateZ(100px); 
 
    background-color: rgba(110,34,162,0.3); 
 
} 
 
#back { 
 
    transform: rotateY(180deg) translateZ(100px); 
 
    background-color: rgba(20,4,62,0.3); 
 
} 
 
#left { 
 
    transform: rotateY(-90deg) translateZ(100px); 
 
    background-color: rgba(80,134,2,0.3); 
 
} 
 
#top { 
 
    transform: rotateX(90deg) translateZ(100px); 
 
} 
 
#bottom { 
 
    transform: rotateX(-90deg) translateZ(100px); 
 
} 
 
#cube:hover { 
 
    transform: rotateX(360deg); 
 
}

<html> 
 
    <body> 
 
    <div id="container"> 
 
     <div id="cube"> 
 
     <div id="front"> 
 
      <h1>1</h1> 
 
     </div> 
 
     <div id="right"> 
 
      <h1>2</h1> 
 
     </div> 
 
     <div id="back"> 
 
      <h1>3</h1> 
 
     </div> 
 
     <div id="left"> 
 
      <h1>4</h1> 
 
     </div> 
 
     <div id="top"> 
 
      <h1>5</h1> 
 
     </div> 
 
     <div id="bottom"> 
 
      <h1>6</h1> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

kaynak

2016-05-31 Dhruv Chadha

seni doğru anladıysam, sadece 200px

#container { 
 
    perspective: 1000px; 
 
    perspective-origin: 0 0; 
 
} 
 
#cube { 
 
    position: relative; 
 
    top: 100px; 
 
    left: 100px; 
 
    width: 200px; 
 
    height:200px; 
 
    transform-style: preserve-3d; 
 
    transition: transform 2s; 
 
    transform-origin: 50% 50%; 
 
} 
 
#cube div { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
#front { 
 
    transform: rotateY( 0deg) translateZ(100px); 
 
    background-color: rgba(0,34,62,0.3); 
 
} 
 
#right { 
 
    transform: rotateY( 90deg) translateZ(100px); 
 
    background-color: rgba(110,34,162,0.3); 
 
} 
 
#back { 
 
    transform: rotateY(180deg) translateZ(100px); 
 
    background-color: rgba(20,4,62,0.3); 
 
} 
 
#left { 
 
    transform: rotateY(-90deg) translateZ(100px); 
 
    background-color: rgba(80,134,2,0.3); 
 
} 
 
#top { 
 
    transform: rotateX(90deg) translateZ(100px); 
 
} 
 
#bottom { 
 
    transform: rotateX(-90deg) translateZ(100px); 
 
} 
 
#cube:hover { 
 
    transform: rotateX(360deg); 
 
}

<html> 
 
    <body> 
 
    <div id="container"> 
 
     <div id="cube"> 
 
     <div id="front"> 
 
      <h1>1</h1> 
 
     </div> 
 
     <div id="right"> 
 
      <h1>2</h1> 
 
     </div> 
 
     <div id="back"> 
 
      <h1>3</h1> 
 
     </div> 
 
     <div id="left"> 
 
      <h1>4</h1> 
 
     </div> 
 
     <div id="top"> 
 
      <h1>5</h1> 
 
     </div> 
 
     <div id="bottom"> 
 
      <h1>6</h1> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

kaynak

2016-05-31 10:23:34

için #cube 'ın yüksekliğini ayarlamak için uygun değiştirelim ayarlamanız gerekir div boyutuna (cudun bir tarafı e). Bu yüzden sadece bu gibi küp için transform-origin: 100px 100px; değiştirdi: küp "düz" taraflı değildir ve konteyner perspektifini kullanır çünkü yüzdeyle işe yaramadı

#container { 
 
    perspective: 1000px; 
 
    perspective-origin: 0 0; 
 
    height: 500px; 
 
} 
 
#cube { 
 
    position: relative; 
 
    top: 100px; 
 
    left: 100px; 
 
    width: 200px; 
 
    transform-style: preserve-3d; 
 
    transition: transform 2s; 
 
    transform-origin: 100px 100px; 
 
} 
 
#cube div { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
#front { 
 
    transform: rotateY( 0deg) translateZ(100px); 
 
    background-color: rgba(0,34,62,0.3); 
 
} 
 
#right { 
 
    transform: rotateY( 90deg) translateZ(100px); 
 
    background-color: rgba(110,34,162,0.3); 
 
} 
 
#back { 
 
    transform: rotateY(180deg) translateZ(100px); 
 
    background-color: rgba(20,4,62,0.3); 
 
} 
 
#left { 
 
    transform: rotateY(-90deg) translateZ(100px); 
 
    background-color: rgba(80,134,2,0.3); 
 
} 
 
#top { 
 
    transform: rotateX(90deg) translateZ(100px); 
 
} 
 
#bottom { 
 
    transform: rotateX(-90deg) translateZ(100px); 
 
} 
 
#cube:hover { 
 
    transform: rotateX(360deg); 
 
}

<html> 
 
    <body> 
 
    <div id="container"> 
 
     <div id="cube"> 
 
     <div id="front"> 
 
      <h1>1</h1> 
 
     </div> 
 
     <div id="right"> 
 
      <h1>2</h1> 
 
     </div> 
 
     <div id="back"> 
 
      <h1>3</h1> 
 
     </div> 
 
     <div id="left"> 
 
      <h1>4</h1> 
 
     </div> 
 
     <div id="top"> 
 
      <h1>5</h1> 
 
     </div> 
 
     <div id="bottom"> 
 
      <h1>6</h1> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

kaynak

2016-05-31 11:04:53 thepio

CSS küpünde RotateX düzgün çalışmıyor

cevap

İlgili konular