1

我正在尝试使<div id = "sun">包含太阳的 png 图像的标签旋转 360 度，所以外观是太阳是动画的并且四处移动。似乎仅旋转属性是不够的。这是我将其应用于的网页：

http://www.manchestergardeningservices.co.uk/

这是我想要达到的效果的网页：

http://outsideapp.com/

这是我在元素样式中应用的transform CSS 属性。请问我是否以错误的方式应用了该属性？我的第二个问题 - 这个 CSS 属性是否有 webkit 版本？

#sun {  
    -moz-transform: rotate(360deg);
    float: left;
    height: 350px;
    margin-left: -100px;
    margin-right: 0;
    margin-top: -185px;
    width: 350px;
    z-index: 100;  
    display: inline;       
}
4

2 回答 2

1

将对象旋转 360 度会产生相同的对象。这就是为什么你看不到任何变化。您可以尝试其他学位，例如180deg。仅当您transition在 transform 属性上应用 css 时，您可能会看到rotate(360deg).

这个属性有一个 webkit 版本，只是-webkit-transform. 您还应该添加不带任何供应商前缀的属性，因为对前缀版本的支持可能会在某一天被删除。

编辑：连续旋转：

@-moz-keyframes rotate {
 from {
  -moz-transform: rotate(0deg);
 }
 to {
  -moz-transform: rotate(360deg);
 }
}
@-webkit-keyframes rotate {
 from {
  -webkit-transform: rotate(0deg);
 }
 to {
  -webkit-transform: rotate(360deg);
 }
}
@keyframes rotate {
 from {
  transform: rotate(0deg);
 }
 to {
  transform: rotate(360deg);
 }
}
#sun {
 -moz-animation: rotate 5s linear infinite;
 -webkit-animation: rotate 5s linear infinite;
 animation: rotate 5s linear infinite;
}
于 2012-08-18T13:49:53.103 回答
1

我认为您希望对其进行动画处理，而不是简单地对其进行转换。变换不会是动画，它只会显示最终结果。

这是使用 CSS 的关键帧动画的概述：http: //css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/

这是一个快速模拟的版本来说明如何将动画应用于 div：http: //jsfiddle.net/donovanh/rhEnY/

注意：前缀

^ 以上包括主要浏览器的前缀以及删除前缀时的无前缀版本。重要的是不要依赖特定的前缀（例如 -moz），因为它们仅作为临时措施，直到 CSS 得到适当支持并且前缀被删除。

如果 JSFiddle 删除了这个例子，下面是 CSS：

#sun {
    background-color: yellow;
    border: 5px solid black;
    border-radius: 20px;
    width:50px;
    height:50px;
    margin:20px;
     -webkit-animation: rotateAnimation 5s infinite linear;
     -moz-animation:    rotateAnimation 5s infinite linear;
     -ms-animation:     rotateAnimation 5s infinite linear;
     -o-animation:      rotateAnimation 5s infinite linear;
     animation:         rotateAnimation 5s infinite linear;
}

@-webkit-keyframes rotateAnimation {
    0%   { -webkit-transform:rotate(0);}
    100%   { -webkit-transform:rotate(360deg);}
}
@-moz-keyframes rotateAnimation {
    0%   { -moz-transform:rotate(0);}
    100%   { -moz-transform:rotate(360deg);}
}
@-ms-keyframes rotateAnimation {
    0%   { -ms-transform:rotate(0);}
    100%   { -ms-transform:rotate(360deg);}
}
@-o-keyframes rotateAnimation {
    0%   { -o-transform:rotate(0);}
    100%   { -o-transform:rotate(360deg);}
}
@keyframes rotateAnimation {
    0%   { transform:rotate(0);}
    100%   { transform:rotate(360deg);}
}
于 2012-08-18T14:05:37.140 回答