Имя пользователя:
Пароль:  
Помощь | Регистрация | Забыли пароль?  | Правила  

Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » Неверно отображается блок с цифрой(html+css)

Ответить
Настройки темы
Неверно отображается блок с цифрой(html+css)

Новый участник


Сообщения: 1
Благодарности: 0

Профиль | Отправить PM | Цитировать


Всем привет, создаю простенький дизайн адаптивного таймера, с перелистыванием цифр.
Не получается отобразить цифру, которая находится за пределами видимости основной цифры. То есть когда вращается на циферблате цифра, то на обратной стороне будет видна другая цифра, которая находится в доп. блоке, но ее не видно (вообще странно отображается, с каким-то перескоком). Вроде все верно настроил с трансформациями.
Ссылка на онлайн редактор: https://playcode.io/effect_skin_timer

Код: Выделить весь код
.container {
  margin-top: 100px;
  margin-left: 200px;
}
/* Цыфра */
.item-number {
  position: relative;
  font-size: 25vw;
  color: #dedede;
/*  background-color: #3a3a3a;*/
  display: inline-block;
  text-shadow: 2px 2px 10px black;
}
.item-number:after {
  position: absolute;
  content: "";
  width: 100%;
  border-bottom: 1px solid black;
  left: 0;
  top: calc(50% - 1px);
  z-index: 5;
}
.item-number .sub-item-before {
  position: absolute;
  z-index: 1;
  perspective: 800px;
  transform-style: preserve-3d;
}
.item-number .sub-item-active {
  position: relative;
  perspective: 800px;
  z-index: 2;
  transform-style: preserve-3d;
}
.item-number .sub-item-active .sub-item-up { 
  transform-style: preserve-3d;
}
.item-number .sub-item-active .sub-item-up .front {
  backface-visibility: visible;
}
.item-number .sub-item-active .sub-item-up .back {
  backface-visibility: hidden;
  background-color: #3a3a3a;
  transform: scale(1, -1) translateY(-50%);
}
.item-number .sub-item-up, 
.item-number .sub-item-down {
  position: relative;
  overflow: hidden;
  background-color: #3a3a3a;
  transition: transform 1s;
}
.item-number .sub-item-up {
    transform-origin: bottom;
    margin-top: -120%;
    clip-path: polygon(100% 50%, 0 50%, 0 100%, 100% 100%);
}
.item-number .sub-item-down {
    margin-bottom: -120%;
    transform-origin: top;
    clip-path: polygon(100% 0, 0 0, 0 50%, 100% 50%);
}
.item-number .front {
  position: absolute;
  z-index: 10;
}
 
.item-number .back {
  position: relative;
}
.item-number .sub-item-up .front,
.item-number .sub-item-up .back {
  transform: translateY(50%);
  background-color: #3a3a3a;
}
.item-number .sub-item-down .front,
.item-number .sub-item-down .back {
  transform: translateY(-50%);
  background-color: #3a3a3a;
}
 
.item-number:hover .sub-item-active .sub-item-up {
  transform: rotateX(-180deg);
}
 
@media screen and (min-width: 500px) {
  .item-number {
     font-size: 18vw;
  }
}
Код: Выделить весь код
<div class="container">
  <div class="item-number">
    <div class="sub-item-before">
      <div class="sub-item-up">
        <div class="front">4</div>
        <div class="back">3</div>
      </div>
      <div class="sub-item-down">
        <div class="front">4</div>
        <div class="back">3</div>
      </div>
    </div>
    <div class="sub-item-active">
      <div class="sub-item-up">
        <div class="front">5</div>
        <div class="back">4</div>
      </div>
      <div class="sub-item-down">
        <div class="front">5</div>
        <div class="back">4</div>    
      </div>
    </div>
  </div>
</div>

Отправлено: 22:42, 10-08-2018

 


Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » Неверно отображается блок с цифрой(html+css)

Участник сейчас на форуме Участник сейчас на форуме Участник вне форума Участник вне форума Автор темы Автор темы Шапка темы Сообщение прикреплено

Похожие темы
Название темы Автор Информация о форуме Ответов Последнее сообщение
Интерфейс - Неверно отображается панель задач .dll Microsoft Windows 2000/XP 1 25-06-2012 15:06
Сетевая печать неверно отображается r1k Microsoft Windows NT/2000/2003 0 07-06-2012 14:54
Неверно отображается количество оперативной памяти upsweep Материнские платы и память 8 12-05-2012 14:22
Переделать CSS в HTML ya.dever Вебмастеру 1 08-04-2012 15:23
[решено] неверно отображается напряжение в винде SoA Непонятные проблемы с Железом 3 14-11-2009 11:31




 
Переход