-
Вебмастеру
(
http://forum.oszone.net/forumdisplay.php?f=22)
Неверно отображается блок с цифрой(html+css)
Всем привет, создаю простенький дизайн адаптивного таймера, с перелистыванием цифр.
Не получается отобразить цифру, которая находится за пределами видимости основной цифры. То есть когда вращается на циферблате цифра, то на обратной стороне будет видна другая цифра, которая находится в доп. блоке, но ее не видно (вообще странно отображается, с каким-то перескоком). Вроде все верно настроил с трансформациями.
Ссылка на онлайн редактор: 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>
|
Время: 01:20.
© OSzone.net 2001-
