在使用CSS3它不工作创造旋转一圈旋转我已经得到了我的IE9浏览器项目的一些问题。对于IE9我用毫秒CSS3转换属性
<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);
-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);
-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>
它不工作。但我在Chrome它的未来有正确的检查。
添加这个标签，这将帮助你以显示IE9网页。
<meta http-equiv="X-UA-Compatible" content="IE=9">