0

ボタンを入力しているときに画像を回転させる方法を見つけるために、2日間試しました。私が助けてほしいのは、Javascriptで画像をimages[0]独自の軸を中心に回転させるコードを取得できるようにすることです。これは難しいように見えるかもしれませんが、私も試してみましたが、専門家の助けが本当に必要です.

4

2 に答える 2

1

Xotic750の jsfiddle に基づいて、アニメーション@keyframesを使用した例を次に示します( -webkit-プレフィックスを使用し、他のブラウザー用に変更します)。

CSS

@-webkit-keyframes r {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
#r:hover ~ img {
    -webkit-animation: r 2s infinite linear;
}

@-webkit-keyframes y {
    0% { -webkit-transform: rotateY(0deg); }
    100% { -webkit-transform: rotateY(360deg); }
}
#y:hover ~ img {
    -webkit-animation: y 2s infinite linear;
}

HTML

<button id="r">R</button>
<button id="y">Y</button>
<br/> <br/>
<img src="http://img844.imageshack.us/img844/2656/impreza20061sh5.jpg" />
于 2013-04-28T11:02:12.260 に答える
0

Paul S は、はるかに優れた回答を提供しています

画像を 90 度回転させる例を次に示します。

CSS

#container {
    position: relative;
    width: 450px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;
}
#card {
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 1.0s linear;
    -moz-transform-style: preserve-3d;
    -moz-transition: all 1.0s linear;
    -o-transform-style: preserve-3d;
    -o-transition: all 1.0s linear;
    transform-style: preserve-3d;
    transition: all 1.0s linear;
}
#container:hover #card, #container.hover_effect #card {
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
}

HMTML

<div id="container">
    <div id="card">
        <img src="http://img844.imageshack.us/img844/2656/impreza20061sh5.jpg" />
    </div>
</div>

jsfiddle

于 2013-04-28T10:41:36.557 に答える