Сохраняйте направление с заклепы ⇐ Html

[Anonymous]

При отдаче, например тень коробки, а также вращение, это вызовет вращение направления коробки-что проблематично, когда тень коробки должен создать иллюзию освещения. />

Код: Выделить всё

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;
}< /code>


< /code>
< /div>
< /div>
< /p>

 < /p>

up:

 

Как я могу вращать  

и все еще сохранить постороннюю строку? /> Решение должно быть чистым CSS ... < /p>

Примечание: анимация в CSS предназначена для демонстрационных целей. В случае использования будет использоваться JavaScript для установки вращения. Но JavaScript ничего не узнает о тене, так как он несет ответственность за дизайн, чтобы определить (или много ...) тени. Вот почему это должно быть чистое решение CSS.

Подробнее здесь: https://stackoverflow.com/questions/351 ... e-rotating