HTML CSS 3D - Разделение внутри 3D-объекта - PullRequest
Новая
       0

HTML CSS 3D - Разделение внутри 3D-объекта

0 голосов
/ 12 марта 2020

Я пытаюсь поместить элемент div в CSS 3d-блок, который вращается с прозрачным фоном изображения и хотел бы, чтобы элемент внутри был виден через отверстия.

Я не мог ' не может найти способ поместить элемент внутрь, возвращаясь назад или впереди него. см. этот кодовый блок - https://codepen.io/drasticCoder/pen/zYGRaEW

Надеюсь, вы поможете! 

    #wrapD3Cube {
    width: 250px;
    height: 213px;
    margin: 20px auto;
    /*background-color: #EEE;*/
}
#D3Cube {
    width: 200px;
    height: 200px;
    top: 50px;
    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -moz-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    margin: auto;
    position: relative;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    
}
#D3Cube > div {
    position: absolute;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    width: 200px;
    height: 200px;
    float: left;
    overflow: ;
    opacity: 1;
    
}


.sidetext{
    font-size: 20px;
    padding: 10px;
}
.boxtext{
    font-size: 20px;
    color: red;
    line-height: 1.2;
    display: block;
    font-weight: bold;
    font-family: 'Varela Round',sans-serif;
}
#side1 {
    transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(100px);
    -moz-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(100px);
    -webkit-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(100px);
        background-image: url('');
    background-size: cover;
    
    
}
#side2 {
    transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(100px);
    -moz-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(100px);
    -webkit-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(100px);
    background-image: url('https://i.imgur.com/QqbO7HF.png');
    background-size: cover;
}
#side3 {
    transform: translateX(0px) translateY(0px) translateZ(100px);
    -moz-transform: translateX(0px) translateY(0px) translateZ(100px);
    -webkit-transform: translateX(0px) translateY(0px) translateZ(100px);
    background-image: url('https://i.imgur.com/QqbO7HF.png');
    background-size: cover;
}
#side4 {
    transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(100px);
    -moz-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(100px);
    -webkit-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(100px);
        background-image: url('https://i.imgur.com/QqbO7HF.png');
    background-size: cover;
}
#side5 {
    transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(100px);
    -moz-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(100px);
    -webkit-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(100px);
        background-image: url('https://i.imgur.com/QqbO7HF.png');
        background-position: center;
    background-size: cover;
}
#side6 {
    transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(100px);
    -moz-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(100px);
    -webkit-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(100px);
    background-color: #fff;
        background-image: url('');
        background-position: center;
    background-size: cover;
}

#D3Cube {
    -webkit-animation: cubeRotation 7s infinite; /* Safari 4.0 - 8.0 */
    animation: cubeRotation 7s infinite;
}
@-webkit-keyframes cubeRotation {
    0%   {  -webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);   }
    50%   { -webkit-transform: rotateX(-22deg) rotateY(-128deg) rotateZ(0deg);  }
    100%   {    -webkit-transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg);  }
}
@keyframes cubeRotation {
    0%   {  transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);   }
    50%   { transform: rotateX(-22deg) rotateY(-238deg) rotateZ(0deg);  }
    100%   {    transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg);  }
}

#D3Cube2 {
    width: 220px;
    height: 50px;
    top: 80px;
    z-index: 100;
    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -moz-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    margin: auto;
    position: relative;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
#D3Cube2 > div {
    position: absolute;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    width: 220px;
    height: 30px;
    float: left;
    overflow: hidden;
    opacity: 1;
}

#side1n {
transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(100px);
    -moz-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(100px);
    -webkit-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(110px);
    background-color: #fff;
    height: 220px !important;
            background-image: url('');
    background-size: cover;
}

#side2n {
    transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(100px);
    -moz-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(100px);
    -webkit-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(110px);
    background-color: #fff;
    background-image: url('');
    background-size: cover;
}
#side3n {
    transform: translateX(0px) translateY(0px) translateZ(100px);
    -moz-transform: translateX(0px) translateY(0px) translateZ(100px);
    -webkit-transform: translateX(0px) translateY(0px) translateZ(110px);
    background-color: #fff;
        background-image: url('');
    background-size: cover;
}
#side4n {
    transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(100px);
    -moz-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(100px);
    -webkit-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(110px);
    background-color: #fff;
        background-image: url('');
    background-size: cover;
}
#side5n {
    transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(100px);
    -moz-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(100px);
    -webkit-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(110px);
    background-color: #fff;
        background-image: url('');
    background-size: cover;
}
#side6n {
    transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(100px);
    -moz-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(100px);
    -webkit-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(110px);
    background-color: #f2f215;
}


#D3Cube2 {
    -webkit-animation: cubeRotation 7s infinite; /* Safari 4.0 - 8.0 */
    animation: cubeRotation 7s infinite;
}
@-webkit-keyframes cubeRotation {
    0%   {  -webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);   }
    50%   { -webkit-transform: rotateX(-22deg) rotateY(-128deg) rotateZ(0deg);  }
    100%   {    -webkit-transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg);  }
}
@keyframes cubeRotation {
    0%   {  transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);   }
    50%   { transform: rotateX(-22deg) rotateY(-238deg) rotateZ(0deg);  }
    100%   {    transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg);  }
}
<div id="wrapD3Cube">
    
        <div id="D3Cube2">
        <div id="side1n"></div>
        <div id="side2n">
        </div>
        <div id="side3n"></div>
        <div id="side4n"></div>
        <div id="side5n"></div>
    </div>
    
    
    <style>
        .inbox{
            width: 100px;
            height: 150px;
          background-color:red;

            margin-top: -80px;
            margin-right: 20px;
             transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotatex(12deg) translateX(0px) translateY(20px) translateZ(50px);
        }
    </style>
    
    <div id="D3Cube">
        <div id="side1"></div>
        <div id="side2" > </div>
        <div id="side3"></div>
        
        <div id="side4"></div>

        <div id="side5"></div>
  
        <div id="side6"></div>
    </div>
    
    <div class="inbox">In box element</div>

    </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...