Например у div есть прямоугольная тень. При вращении прямоугольника происходит вращение направления прямоугольной тени, что вызывает проблемы, так как тень прямоугольника должна создать иллюзию освещения.
Пример: jsfiddle
div {
width: 50px;
height: 50px;
margin: 20px;
box-shadow: 10px 10px 10px #000;
display: inline-block;
}
#box1 {
background-color: #b00;
}
#box2 {
background-color: #0b0;
transform: rotate(30deg);
}
#box3 {
background-color: #00b;
transform: rotate(60deg);
}
#box4 {
background-color: #b0b;
transform: rotate(90deg);
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#box6 {
background-color: #0bb;
animation-name: spin;
animation-duration: 2s;
animation-iteration-count: infinite;
}
Ответ для решения этой проблемы должен выглядеть примерно так:
Как я могу повернуть div и сохранить прямоугольную тень от него в том же направлении? Решение должно быть только -- CSS...
Перевод вопроса : Keep box-shadow direction consistent while rotating @Chris
Ответ
Размеры квадрата и его положение зададим родительскому блоку, а псевдоэлементы пусть их наследуют. «Блок-тень» немного сдвинем, добавим ему размытие (имитация тени) и будем вращать псевдоэлементы.
body {
background-color: #8694ef;
}
.square {
width: 100px;
height: 100px;
position: relative;
top: 50px;
left: 100px;
}
.square:before,
.square:after {
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 20px;
left: 20px;
background-color: rgba(0,0,0,0.6);
filter: blur(8px);
animation: rotate linear 5s infinite;
}
.square:after {
top: 0;
left: 0;
filter: none;
background-color: #ccc;
}
@keyframes rotate {
to {
transform: rotate(1turn);
}
}
Комментариев нет:
Отправить комментарий