Этот образец подвижного 3D-куба не работает корректно в Internet Explorer.
Должен быть поворот на 360 градусов, как в других браузерах.
Какие из префиксов вендоров отсутствуют?
случайный текст для отправки сообщения, состоящего из более подробной информации; случайный текст для отправки сообщения, заполненного более подробной информацией; случайный текст для отправки сообщения, заполненного дополнительной информацией; случайный текст для отправки сообщения, заполненного дополнительной информацией;случайный текст для отправки поста с более подробной информацией случайный текст для отправки поста с более подробной информацией
/* animation speed */
.container {
-webkit-animation: rotate 18s infinite linear;
animation: rotate 18s infinite linear;
}
/* native */
.cube { transform:scaleX(.7) scaleY(.7); }
* { margin:0; padding:0; outline:none; box-sizing: border-box; }
.stage { width:240px; height:360px; overflow:hidden; }
.cube {
width:240px;
height:400px;
margin-top:-20px;
-ms-perspective:1000px;
-webkit-perspective: 1000px;
perspective: 1000px;
-ms-perspective-origin: center center;
-webkit-perspective-origin: center center;
perspective-origin: center center;
}
.container {
display:block;
width: 240px;
height: 400px;
-ms-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.side {
display:block;
position: absolute;
width: 240px;
height: 400px;
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
}
.face1 {
-webkit-transform: translateZ(120px);
transform: translateZ(120px);
background-color: green;
}
.face2 {
-webkit-transform: translateX(120px) rotateY(90deg);
transform: translateX(120px) rotateY(90deg);
background-color: red;
}
.face3 {
-webkit-transform: translateZ(-120px) scale(-1, 1);
transform: translateZ(-120px) scale(-1, 1);
background-color: teal;
}
.face4 {
-webkit-transform: translateX(-120px) rotateY(90deg) scale(-1, 1);
transform: translateX(-120px) rotateY(90deg) scale(-1, 1);
background-color: black;
}
@-webkit-keyframes rotate { 100% { -webkit-transform: rotateY(-360deg); transform: rotateY(-360deg); } }
@keyframes rotate { 100% { -webkit-transform: rotateY(-360deg); transform: rotateY(-360deg); } }
</style>
</head>
<body cz-shortcut-listen="true">
<div class="stage">
<div class="cube">
<a class="container" href="">
<span class="face1 side"></span>
<span class="face2 side"></span>
<span class="face3 side"></span>
<span class="face4 side"></span>
</a>
</div>
</div>
</body></html>