Wie über CSS einen 2D-Würfel Make

Question

i eine Animation wie diese haben will: i

#item1_placeholder{ 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 7%; 
    content: ""; 
    display: block; 
    padding-bottom: 7%; 
            border: 3px solid #F4DC03; 

} unten wie Code einen Platz verblasst in Platzhalter will

, und ich will diesen Platzhalter und Würfel die Größe mit Anzeigefenster Ändern der Größe,

dann dem Quadrat drehen wie ein 2D-Würfel in irgendeine Richtung wie bei dem ersten Show der vorderen, biegt dann nach links, dann biegen Sie nach oben

kann mir jemand helfen !!!

Answer 1

Check THIS

spielen, um mit der CSS, wie Sie sich wie der Würfel

Answer 2

zuerst muss ich Entschuldigung für mein schlechtes Englisch machen, ich es wie folgt weiter unten Code gemacht:

CSS:

@charset "utf-8"; 
@media screen and (min-width: 320px) { 
    body { 
       font-family:'BebasRegular'; 
       text-align:center; 
       background-color: #d0d2d0; 
       background-image:url(../Image/Back_pattern.png);  
       width: 95%; 
       height: 95%; 
       margin:auto; 
       } 

    div#main { 
       font-size: 3vw; 
       } 

    #content { 
         margin:auto; 
         height:100vh; 
         width:100vw; 
        } 
} 


@font-face { 
    font-family: 'BebasRegular'; 
    src: url('../Fonts/BEBAS___-webfont.eot'); 
    src: url('../Fonts/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../Fonts/BEBAS___-webfont.woff') format('woff'), 
     url('../Fonts/BEBAS___-webfont.ttf') format('truetype'), 
     url('../Fonts/BEBAS___-webfont.svg#BebasRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 

@media only screen and (orientation: landscape) { 
#item1_placeholder{ 
     position: fixed; 
     top: 50%; 
     left: 50%; 
     transform: translate(-50%, -50%); 
     width: 7%; 
     content: ""; 
     display: block; 
     padding-bottom: 7%; 
} 


    #AHCube div { 
    position: absolute; 
    width: 7vw; 
    height: 7vw; 
    border: 1px solid rgba(0,0,0,0.3); 
    background: rgba(255,255,255,1); 
    box-shadow: inset 0 0 20px rgba(0,0,0,0.3); 
    text-align: center; 
    line-height: 120px; 
    } 

    #AHCube .Front { 
    -webkit-transform: translateZ(3.5vw); 
    transform: translateZ(3.5vw); 
    -moz-transform: translateZ(3.5vw); 
    -o-transform: translateZ(3.5vw); 
    } 
    #AHCube .Right { 
    -webkit-transform: rotateY(90deg) translateZ(3.5vw);     
    transform: rotateY(90deg) translateZ(3.5vw);     
    -moz-transform: rotateY(90deg) translateZ(3.5vw);  
    -o-transform: rotateY(90deg) translateZ(3.5vw);        
    } 
    #AHCube .Top { 
    -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(3.5vw); 
    transform: rotateY(90deg) rotateX(90deg) translateZ(3.5vw); 
    -moz-transform: rotateY(90deg) rotateX(90deg) translateZ(3.5vw); 
    -o-transform: rotateY(90deg) rotateX(90deg) translateZ(3.5vw); 
    } 
    #AHCube .Back { 
    -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(3.5vw); 
    transform: rotateY(180deg) rotateZ(90deg) translateZ(3.5vw); 
    -moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(3.5vw); 
    -o-transform: rotateY(180deg) rotateZ(90deg) translateZ(3.5vw); 
    } 
    #AHCube .Left { 
    -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(3.5vw); 
    transform: rotateY(-90deg) rotateZ(90deg) translateZ(3.5vw); 
    -moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(3.5vw); 
    -o-transform: rotateY(-90deg) rotateZ(90deg) translateZ(3.5vw); 
    } 
    #AHCube .Below { 
    -webkit-transform: rotateX(-90deg) translateZ(3.5vw);  
    transform: rotateX(-90deg) translateZ(3.5vw);  
    -moz-transform: rotateX(-90deg) translateZ(3.5vw);  
    -o-transform: rotateX(-90deg) translateZ(3.5vw);  
    background:rgba(3,76,244,1.00); 
} 



    .AH_Ani1 { 
    -webkit-animation-name: spin1; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-duration: 5s; 
    -webkit-animation-fill-mode: forwards; 
    -webkit-transform-style: preserve-3d; 
    -webkit-transform-origin: 3.5vw 3.5vw 0; 

    animation-name: spin1; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: 1; 
    animation-duration: 5s; 
    animation-fill-mode: forwards; 
    transform-style: preserve-3d; 
    transform-origin: 3.5vw 3.5vw 0; 

    -moz-animation-name: spin1; 
    -moz-animation-timing-function: ease-in-out; 
    -moz-animation-iteration-count: 1; 
    -moz-animation-duration: 5s; 
    -moz-animation-fill-mode: forwards; 
    -moz-transform-style: preserve-3d; 
    -moz-transform-origin: 3.5vw 3.5vw 0; 

    -o-animation-name: spin1; 
    -o-animation-timing-function: ease-in-out; 
    -o-animation-iteration-count: 1; 
    -o-animation-duration: 5s; 
    -o-animation-fill-mode: forwards; 
    -o-transform-style: preserve-3d; 
    -o-transform-origin: 3.5vw 3.5vw 0; 
    } 
    .ICO_Hold1 { 
     position: fixed; 
     top: 50%; 
     left: 50%; 
     transform: translate(-50%, -50%); 
     filter: drop-shadow(5% 5% 5% #222); 
     width: 80%; 
     height: auto; 
     display:block; 
    } 



    @-webkit-keyframes spin1 { 
    from,to { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 
    0% { -webkit-transform:scale(0,0);  }  
    10% { -webkit-transform:scale(1,1);  } 
    28%  { -webkit-transform: rotateY(-90deg);       } 
    46%  { -webkit-transform: rotateY(-90deg) rotateZ(90deg);   } 
    64%  { -webkit-transform: rotateY(-180deg) rotateZ(90deg);   } 
    82%  { -webkit-transform: rotateY(90deg) rotateX(90deg);    } 
    100%  { -webkit-transform: rotateX(90deg);       } 
    } 
    @keyframes spin1 { 
    from,to { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 
    0% { transform:scale(0,0);  }  
    10% { transform:scale(1,1);  } 
    28%  { transform: rotateY(-90deg);       } 
    46%  { transform: rotateY(-90deg) rotateZ(90deg);   } 
    64%  { transform: rotateY(-180deg) rotateZ(90deg);   } 
    82%  { transform: rotateY(90deg) rotateX(90deg);    } 
    100%  { transform: rotateX(90deg);       } 
    } 
    @-moz-keyframes spin1 { 
    from,to { -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 
    0% { -moz-transform:scale(0,0);  }  
    10% { -moz-transform:scale(1,1);  } 
    28%  { -moz-transform: rotateY(-90deg);       } 
    46%  { -moz-transform: rotateY(-90deg) rotateZ(90deg);   } 
    64%  { -moz-transform: rotateY(-180deg) rotateZ(90deg);   } 
    82%  { -moz-transform: rotateY(90deg) rotateX(90deg);    } 
    100%  { -moz-transform: rotateX(90deg);       } 
    } 
    @-o-keyframes spin1 { 
    from,to { -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 
    0% { -o-transform:scale(0,0);  }  
    10% { -o-transform:scale(1,1);  } 
    28%  { -o-transform: rotateY(-90deg);       } 
    46%  { -o-transform: rotateY(-90deg) rotateZ(90deg);   } 
    64%  { -o-transform: rotateY(-180deg) rotateZ(90deg);   } 
    82%  { -o-transform: rotateY(90deg) rotateX(90deg);    } 
    100%  { -o-transform: rotateX(90deg);       } 
    } 


} 




@media only screen and (orientation: portrait) { 

#item1_placeholder{ 
     position: fixed; 
     top: 50%; 
     left: 50%; 
     transform: translate(-50%, -50%); 
     width: 0%; 
     content: ""; 
     display: block; 
     padding-bottom: 0%; 
} 
    #AHCube div { 
    position: absolute; 
    width: 0vw; 
    height: 0vw; 
    border: 1px solid rgba(0,0,0,0.3); 
    background: rgba(255,255,255,1); 
    box-shadow: inset 0 0 20px rgba(0,0,0,0.3); 
    text-align: center; 
    line-height: 120px; 
    } 
    .ICO_Hold1 { 
     position: fixed; 
     top: 0%; 
     left: 0%; 
     transform: translate(-50%, -50%); 
     -webkit-filter: drop-shadow(50% 50% 50% #222); 
     filter: drop-shadow(5% 5% 5% #222); 
     width: 0%; 
     height: auto; 
     display:none; 
    } 
    } 

HTML:

<div id="item1_placeholder" > 

<div id="AHCube" class="AH_Ani1"> 
<div class="Front"><img class="ICO_Hold1" src="Image/1-1.png" /></div> 
<div class="Right"><img class="ICO_Hold1" src="Image/1-2.png" /></div> 
<div class="Top"><img class="ICO_Hold1" src="Image/1-3.png" /></div> 
<div class="Back"><img class="ICO_Hold1" src="Image/1-4.png" /></div> 
<div class="Left"><img class="ICO_Hold1" src="Image/1-5.png" /></div> 
<div class="Below"><img class="ICO_Hold1" src="Image/1-6.png" /></div> 

</div> 

</div> 

es in Chrom und Mozilla gut funktionieren, aber es ist nicht in Ordnung IE oder Microsoft Edge, und ich habe es nicht

kann jemand Check dies in tragbarem Gerät überprüfen und andeuten mich, dies zu korrigieren?