Если вы используете IE10, то решение может быть:
аюсь использовать поддержку webkit для CSS3transform: matrix3d(<matrix>) создать эффект «падающей карты». (Единственная цель для вывода это Chrome)
Конечный эффект должен перейти через 4 этапа ниже и закончиться просто горизонтальной линией:
Вот CSS у меня сейчас:
#test {
margin: auto auto;
height: 200px;
width: 200px;
border:1px solid black;
background-color: lightblue;
-webkit-perspective: 1000;
-webkit-transform-origin: 50% 100%;
-webkit-transform-style: preserve-3d;
-webkit-animation-name: flip-card;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5);
}
@-webkit-keyframes flip-card {
0% {-webkit-transform: ;}
100% {-webkit-transform:
matrix3d(1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 0, 0,
0, 0, 0.001, 1);}
}
И HTML прост для тестирования:
<body>
<div id="test">this div should fall forward...</div>
</body>
Matrix3D в приведенном выше был основан на чтенииэтот ТАК вопрос, но он создает уменьшающийся квадрат, который переворачивается вокруг оси X, определенной в нижней части начального поля.
Я понимаю, что матрица CSS 2d может создавать прямоугольники и параллелограммы только путем преобразования прямоугольника, а неправильные формы требуют операции преобразования matrix3d (это был полезен для обновления моей увядающей линейной алгебры!), но мне кажется, что я могу только создавать прямоугольники и параллелограммы.
Я посмотрел вокруг на некоторые вопросы SO, помеченныеmatrix а такжеtransformation, Большинство из них не основаны на CSS, и я не смог получить нужное преобразование.