Question

我正在尝试将包含太阳的png图像的<div id = "sun">标签旋转360度，因此外观是太阳是动画的并且四处移动。似乎单独的旋转属性是不够的。这是我申请的网页：

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

这是我想要实现效果的网页：

以下是我在元素样式中应用的transform CSS property。请问我是否以错误的方式申请了这处房产？我的第二个问题 - 是否有这个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;       
}

Answer 1

将对象旋转360度会产生相同的对象。这就是为什么你没有看到任何变化。您可以尝试其他学位，例如180deg。只有在转换属性上应用css transition时，您才会看到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;
}

Answer 2

我认为你想要制作它的动画，而不是简单地改变它。变换不是动画，它只会显示最终结果。

以下是使用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);}
}

在div元素上使用-moz-transform

2 个答案:

注意：前缀