Saya ingin memutar kubus dan wajahnya diperluas. saya sudah mencoba sesuatu seperti di bawah ini,

.wrapper{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
 }
 .cube-wrap {
     width: 40px;
     height: 40px;
     -webkit-perspective: 2000px;
     -webkit-perspective-origin: 50% -500px;
 }
 .single-box {
     background-size: cover;
     display: block;
     position: absolute;
     width: 40px;
     height: 40px;
     background-color: #60c2ef;
    -webkit-transform: rotateY(45deg) translateZ(-200px) rotateX(15deg);
    -webkit-transform-origin: 50% 50% 0;            
 }
 .box {
     -webkit-transform-style: preserve-3d;
     -webkit-animation: rotate 1.5s infinite ease;
 }
 .side-front {
     animation: side-front-animation 3s ease infinite;
     animation-delay: 100ms;
     transform: rotateY(0deg) translateZ(150px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     -webkit-transform: translateZ(20px);
 }
 .side-back {
     animation: side-back-animation 3s ease infinite;
     animation-delay: 100ms;
     transform: rotateY(-180deg) translateZ(150px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     border: #ffffff;
     -webkit-transform: rotateY(180deg) translateZ(20px);
 }
 .side-top {
     animation: side-top-animation 3s ease infinite;
     animation-delay: 0;
     transform: rotateX(90deg) translateZ(150px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     -webkit-transform: rotateX(90deg) translateZ(20px);
 }
 .side-bottom {
     animation: side-bottom-animation 3s ease infinite;
     animation-delay: 0;
     transform: rotateX(-90deg) translateZ(150px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     -webkit-transform: rotateX(-90deg) translateZ(20px);
 }
 .side-left {
     animation: side-left-animation 3s ease infinite;
     animation-delay: 100ms;
     transform: rotateY(-90deg) translateZ(150px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     -webkit-transform: rotateY(-90deg) translateZ(20px);
 }
 .side-right {
     animation: side-right-animation 3s ease infinite;
     animation-delay: 100ms;
     transform: rotateY(90deg) translateZ(150px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     -webkit-transform: rotateY(90deg) translateZ(20px);
 }


 @-webkit-keyframes rotate {
     0% { -webkit-transform: rotateY(0); }
     100% { -webkit-transform: rotateY(360deg); }
 } 

 @-webkit-keyframes side-top-animation {
     0% { opacity: 1; transform: rotateX(90deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateX(90deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateX(90deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateX(90deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateX(90deg) translateZ(150px) }
 }

 @-webkit-keyframes side-bottom-animation {
     0% { opacity: 1; transform: rotateX(-90deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateX(-90deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateX(-90deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateX(-90deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateX(-90deg) translateZ(150px) }
 }

 @-webkit-keyframes side-front-animation {
     0% { opacity: 1; transform: rotateY(0deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateY(0deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateY(0deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateY(0deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateY(0deg) translateZ(150px) }
 } 
 @-webkit-keyframes side-back-animation {
     0% { opacity: 1; transform: rotateY(-180deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateY(-180deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateY(-180deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateY(-180deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateY(-180deg) translateZ(150px) }
 }

 @-webkit-keyframes side-left-animation {
     0% { opacity: 1; transform: rotateY(-90deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateY(-90deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateY(-90deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateY(-90deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateY(-90deg) translateZ(150px) }
 }
 @-webkit-keyframes side-right-animation {
     0% { opacity: 1; transform: rotateY(90deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateY(90deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateY(90deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateY(90deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateY(90deg) translateZ(150px) }
 }

 <div class="wrapper">
     <div class="cube-wrap">
         <div class="box">
             <div class="single-box side-back"></div>
             <div class="single-box side-top"></div>
             <div class="single-box side-bottom"></div>
             <div class="single-box side-left"></div>
             <div class="single-box side-right"></div>
             <div class="single-box side-front"></div>
        </div>
    </div>
</div>

Kode di atas berfungsi. itu berputar dan berputar tetapi wajahnya tidak cukup dekat untuk terlihat seperti kubus. bagaimana saya bisa memperbaiki ini.

Dapatkah seseorang membantu saya dengan ini. Terima kasih.

Saya tidak tahu cara menambahkan animasi ke wajah kubus. dan kubus harus seperti pada gambar di bawah ini.

enter image description here

0
someuser2491 27 Oktober 2019, 23:54

1 menjawab

Jawaban Terbaik

Dalam kode Anda, ubah height dan width dari .single-box menjadi 150px untuk mencocokkan make a box, kemudian untuk mengkompensasi perubahan pada animasi, ubah juga height dan width dari .cube-wrap dengan nilai .single-box yang sama.

Jadi Anda mendapatkan sesuatu seperti ini

.wrapper{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
 }
 .cube-wrap {
     width: 130px;
     height: 130px;
     -webkit-perspective: 2000px;
     -webkit-perspective-origin: 50% -500px;
 }
 .single-box {
     background-size: cover;
     display: block;
     position: absolute;
     width: 130px;
     height: 130px;
     background-color: #60c2ef;
    -webkit-transform: rotateY(45deg) translateZ(-200px) rotateX(15deg);
    -webkit-transform-origin: 50% 50% 0;            
 }
 .box {
     -webkit-transform-style: preserve-3d;
     -webkit-animation: rotate 1.5s infinite ease;
 }
 .side-front {
     animation: side-front-animation 3s ease infinite;
     animation-delay: 100ms;
     transform: rotateY(0deg) translateZ(300px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     -webkit-transform: translateZ(20px);
 }
 .side-back {
     animation: side-back-animation 3s ease infinite;
     animation-delay: 100ms;
     transform: rotateY(-180deg) translateZ(150px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     border: #ffffff;
     -webkit-transform: rotateY(180deg) translateZ(20px);
 }
 .side-top {
     animation: side-top-animation 3s ease infinite;
     animation-delay: 0;
     transform: rotateX(90deg) translateZ(150px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     -webkit-transform: rotateX(90deg) translateZ(20px);
 }
 .side-bottom {
     animation: side-bottom-animation 3s ease infinite;
     animation-delay: 0;
     transform: rotateX(-90deg) translateZ(150px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     -webkit-transform: rotateX(-90deg) translateZ(20px);
 }
 .side-left {
     animation: side-left-animation 3s ease infinite;
     animation-delay: 100ms;
     transform: rotateY(-90deg) translateZ(150px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     -webkit-transform: rotateY(-90deg) translateZ(20px);
 }
 .side-right {
     animation: side-right-animation 3s ease infinite;
     animation-delay: 100ms;
     transform: rotateY(90deg) translateZ(150px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     -webkit-transform: rotateY(90deg) translateZ(20px);
 }


 @-webkit-keyframes rotate {
     0% { -webkit-transform: rotateY(0); }
     100% { -webkit-transform: rotateY(360deg); }
 } 

 @-webkit-keyframes side-top-animation {
     0% { opacity: 1; transform: rotateX(90deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateX(90deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateX(90deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateX(90deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateX(90deg) translateZ(150px) }
 }

 @-webkit-keyframes side-bottom-animation {
     0% { opacity: 1; transform: rotateX(-90deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateX(-90deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateX(-90deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateX(-90deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateX(-90deg) translateZ(150px) }
 }

 @-webkit-keyframes side-front-animation {
     0% { opacity: 1; transform: rotateY(0deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateY(0deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateY(0deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateY(0deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateY(0deg) translateZ(150px) }
 } 
 @-webkit-keyframes side-back-animation {
     0% { opacity: 1; transform: rotateY(-180deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateY(-180deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateY(-180deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateY(-180deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateY(-180deg) translateZ(150px) }
 }

 @-webkit-keyframes side-left-animation {
     0% { opacity: 1; transform: rotateY(-90deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateY(-90deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateY(-90deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateY(-90deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateY(-90deg) translateZ(150px) }
 }
 @-webkit-keyframes side-right-animation {
     0% { opacity: 1; transform: rotateY(90deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateY(90deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateY(90deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateY(90deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateY(90deg) translateZ(150px) }
 }
<div class="wrapper">
        <div class="cube-wrap">
            <div class="box">
                <div class="single-box side-back"></div>
                <div class="single-box side-top"></div>
                <div class="single-box side-bottom"></div>
                <div class="single-box side-left"></div>
                <div class="single-box side-right"></div>
                <div class="single-box side-front"></div>
           </div>
       </div>
   </div>
0
Francis ask question 29 Oktober 2019, 05:21