Нужна Ваша помощь по css!

zibro · 13 сен 2018

Ребята, помогите разобраться! Имеется куб (закинул его в один файл), что бы проще было просмотреть его.Каким образом можно изменить в нём грани, я имею ввиду их высоту, с шириной всё понятно, а вот как сузить их?

Код:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        
<style>

body {
    color: rgb(6, 106, 117);
    text-transform: uppercase;
    font-family: sans-serif;
    font-size: 100%;
}

.cube {
    width: 100%;
    text-align: center;
    margin: 20 auto;
    height: 100px;
    width: 300px;

    -webkit-transform-style: preserve-3d;
    -webkit-animation: rotate-cube 10s linear infinite;
}

.front, .bottom, .top, .back {
    background: rgb(247, 247, 247);
    border: 1px solid rgba(147, 184, 189, .8);
    -webkit-border-radius: 5px; /* Закругление граней */
    -webkit-box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 2px 5px rgba(208, 223, 226, .4) inset;
    height: 95px;
    position: absolute;
    width: 100%;
}

.front {
    -webkit-transform: translateZ(55px);
}

.bottom {
    -webkit-transform: rotateX(90deg) translateZ(-55px) rotateY(180deg) rotateZ(180deg);
}

.top {
    -webkit-transform: rotateX(-90deg) translateZ(-55px) rotateY(180deg) rotateZ(180deg);
}

.back {
    -webkit-transform: rotateX(180deg) translateZ(55px);
}

@-webkit-keyframes rotate-cube {
    0%{-webkit-transform: rotateX(0deg);}
    10%{-webkit-transform: rotateX(90deg);}
    40%{-webkit-transform: rotateX(180deg);}
    60%{-webkit-transform: rotateX(270deg);}
    90%{-webkit-transform: rotateX(360deg);}
    100{-webkit-transform: rotateX(360deg);}
}
</style>
</head>

<body>
  <div class="cube">
    <div class="front">
        <h1>11111</h1>
    </div>
    <div class="bottom">
        <h2>11111</h2>
    </div>
    <div class="top">
        <h2>11111</h2>
    </div>
    <div class="back">
        <h2>11111</h2>
    </div>
</div>
</body>
</html>

Dotrox · 13 сен 2018

zibro сказал(а): ↑

Имеется куб (закинул его в один файл), что бы проще было просмотреть его.
Нажмите, чтобы раскрыть...

Прочитайте правила раздела.

Войти или зарегистрироваться

Нужна Ваша помощь по css!

zibro

Dotrox Команда форума