1

太陽の png 画像を含むタグを 360 度回転させようとしている<div id = "sun">ので、太陽がアニメーション化されてぐるぐる動いているように見えます。回転プロパティだけでは不十分なようです。ここに私がそれを適用しているWebページがあります：

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

そして、ここに私が達成しようとしている効果のあるウェブページがあります:

http://outsideapp.com/

これは、要素のスタイリングに適用した変換 CSS プロパティです。プロパティを間違った方法で適用したかどうか尋ねてもよろしいですか? そして私の 2 番目の質問 - この 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変換プロパティに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 に答える