0
この問題については、5回転画像のカルーセルにオンクリック機能を追加する作業です。画像がクリックされると、画像を記述するテキストが左に浮かぶようにWebページを読み込みます。私は完全に失われています。イメージとイメージを記述するテキストを含むWebページを読み込むonClick関数を追加するにはどうすればよいですか？
私はすでにやったことがありますが、画像を説明するテキストと共にonClickイベントを追加する方法はわかりません。どんな助けもありがとう。
@-webkit-keyframes spinner {
from {
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(-360deg);
}
}
#stage {
margin: 1em auto;
-webkit-perspective: 1200px;
}
#spinner {
-webkit-animation-name: spinner;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 6s;
-webkit-transform-style: preserve-3d;
}
#spinner:hover {
-webkit-animation-play-state: paused;
}
#spinner img {
position: absolute;
border: 1px solid #ccc;
background: rgba(255, 255, 255, 0.8);
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
}<body>
<div id="stage" style="padding-left: 180px; height: 160px;">
<div id="spinner" style="-webkit-transform-origin: 180px 0 0;">
<img style="-webkit-transform: rotateY(0deg) translateX(180px); padding: 0 0 0 160px;" src="images/truck1.jpg" width="200" height="160" alt="">
<img style="-webkit-transform: rotateY(-72deg) translateX(180px); padding: 0 0 0 147px;" src="images/truck2.jpg" width="213" height="160" alt="">
<img style="-webkit-transform: rotateY(-144deg) translateX(180px); padding: 0 0 0 120px;" src="images/truck3.jpg" width="240" height="160" alt="">
<img style="-webkit-transform: rotateY(-216deg) translateX(180px); padding: 0 0 0 147px;" src="images/truck4.jpg" width="213" height="160" alt="">
<img style="-webkit-transform: rotateY(-288deg) translateX(180px); padding: 0 0 0 122px;" src="images/truck5.jpg" width="238" height="160" alt="">
</div>
</div>
</body>