Witam,
stworzyłem sobie trójwymiarową kostkę, w której będę wyświetlał zawartość mojej strony. Stronę mam w bootstrapie, ale ta kostka, żeby się trzymała musi być w divach z position absolute. Poniżej załączam kod:
HTML:
<main>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="content">
<div class="scene">
<div class="cube">
<div class="cube-face cube-face-front">
</div>
<div class="cube-face cube-face-back">
</div>
<div class="cube-face cube-face-left">
</div>
<div class="cube-face cube-face-right" id="style-3">
</div>
<div class="cube-face cube-face-top">
</div>
<div class="cube-face cube-face-bottom">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
CSS:
.content{
text-align: center;
max-width: 100%;
height: auto;
}
/* CUBE */
.scene {
margin-top: 150px;
margin-bottom: 150px;
width: 400px;
height: 400px;
perspective: 600px;
}
.cube{
width: inherit;
height: inherit;
transform-style: preserve-3d;
transition: transform 0.6s;
}
.cube-face{
overflow: auto;
width: inherit;
height: inherit;
position: absolute;
background: black;
opacity: 0.8;
}
.cube-face-front {
background: radial-gradient(at left top, white 5%, black 60%);
transform: translate3d(0, 0, 200px);
}
.cube-face-back {
background: radial-gradient(at left top, white 5%, black 60%);
transform: rotateY(180deg) translate3d(0, 0, 200px);
}
.cube-face-left {
background: radial-gradient(at left top, white 5%, black 60%);
transform: rotateY(-90deg) translate3d(0, 0, 200px);
}
.cube-face-right {
background: radial-gradient(at left top, white 5%, black 60%);
transform: rotateY(90deg) translate3d(0, 0, 200px);
}
.cube-face-top {
background: radial-gradient(at left top, white 5%, black 60%);
transform: rotateX(90deg) translate3d(0, 0, 200px);
}
.cube-face-bottom {
background: radial-gradient(at left top, white 5%, black 60%);
transform: rotateX(-90deg) translate3d(0, 0, 200px);
}
Ma ktoś jakiś pomysł co zrobić, żeby ta kostka(cube) skalowała się jak ten div content, czyli działała jak bootsrap przykazał?