0
そのないworking.For IE9 CSS3を使用してスピナーcricle回転を作成しながら、私はMSがCSS3で
をtransformプロパティを使用しているブラウザIE9上で私のプロジェクトでは、いくつかの問題を持っている
<style>
body {
background-color: #ed5565;
}
.main {
width: 60em;
margin: 0 auto;
}
.slice {
position: relative;
float: left;
width: 14em;
height: 6em;
margin: .5em;
padding: 2em;
text-align: center;
border: 1px solid rgba(0, 0, 0, .5);
}
.slice > div {
margin: 1em auto;
}
.slice > div:nth-child(2) {
font-family: cursive;
position: absolute;
bottom: 0;
left: 3em;
color: #fff;
}
[data-loader='satellite']
{
position: relative;
width: 48px;
height: 48px;
animation: satellite 3s infinite linear;
border: 1px solid #fff;
border-radius: 100%;
}
[data-loader='satellite']:before,
[data-loader='satellite']:after
{
position: absolute;
left: 0;
width: 15px;
height: 15px;
content: '';
border-radius: 100%;
background-color: #fff;
-webkit-box-shadow: 0 0 10px #fff;
-ms-box-shadow:0 0 10px #fff;
box-shadow: 0 0 10px #fff;
}
[data-loader='satellite']:after
{
right: 0;
width: 24px;
height: 24px;
margin: 12px;
}
@-webkit-keyframes satellite
{
from
{
-webkit-transform: rotate(0) translateZ(0);
-ms-transform: rotate(0) translateZ(0);
-o-transform: rotate(0) translateZ(0);
transform: rotate(0) translateZ(0);
}
to
{
-webkit-transform: rotate(360deg) translateZ(0);
-ms-transform: rotate(360deg) translateZ(0);
-o-transform: rotate(360deg) translateZ(0);
transform: rotate(360deg) translateZ(0);
}
}
@-moz-keyframes satellite
{
from
{
-webkit-transform: rotate(0) translateZ(0);
-ms-transform: rotate(0) translateZ(0);
-o-transform: rotate(0) translateZ(0);
transform: rotate(0) translateZ(0);
}
to
{
-webkit-transform: rotate(360deg) translateZ(0);
-ms-transform: rotate(360deg) translateZ(0);
-o-transform: rotate(360deg) translateZ(0);
transform: rotate(360deg) translateZ(0);
}
}
@-o-keyframes satellite
{
from
{
-webkit-transform: rotate(0) translateZ(0);
-ms-transform: rotate(0) translateZ(0);
-o-transform: rotate(0) translateZ(0);
transform: rotate(0) translateZ(0);
}
to
{
-webkit-transform: rotate(360deg) translateZ(0);
-ms-transform: rotate(360deg) translateZ(0);
-o-transform: rotate(360deg) translateZ(0);
transform: rotate(360deg) translateZ(0);
}
}
@keyframes satellite
{
from
{
-webkit-transform: rotate(0) translateZ(0);
-ms-transform: rotate(0) translateZ(0);
-o-transform: rotate(0) translateZ(0);
transform: rotate(0) translateZ(0);
}
to
{
-webkit-transform: rotate(360deg) translateZ(0);
-ms-transform: rotate(360deg) translateZ(0);
-o-transform: rotate(360deg) translateZ(0);
transform: rotate(360deg) translateZ(0);
}
}
@-ms-keyframes satellite
{
from
{
-webkit-transform: rotate(0) translateZ(0);
-ms-transform: rotate(0) translateZ(0);
-o-transform: rotate(0) translateZ(0);
transform: rotate(0) translateZ(0);
\t \t \t \t -moz-transform: rotate(0) translateZ(0);
}
to
{
-webkit-transform: rotate(360deg) translateZ(0);
-ms-transform: rotate(360deg) translateZ(0);
-o-transform: rotate(360deg) translateZ(0);
transform: rotate(360deg) translateZ(0);
\t \t \t \t -moz-transform: rotate(360) translateZ(0);
}
}
}
</style><!DOCTYPE html>
<div class="main">
<div class="slice">
<div data-loader="satellite"></div>
<div>data-loader="satellite"</div>
</div>
それは正しく働いていません。しかし、私はクロムが正しく来ることをチェックしました。これらの解決策が必要なのを助けてください.....