我正在创建一个演示应用程序，当点击按钮时随机选择场地。点击按钮后，我想在选择场地之前，使用CSS3和jQuery，使用插槽机旋转动画来滚动场地。
我想到使用-webkit关键帧和改变背景位置，但它不是我想要的理想动画。
@-webkit-keyframes spin{
0% {
background-position: 0,0 0;
-webkit-transform: rotateX(0deg);
}
100% {
background-position: 0,0 -640px;
-webkit-transform: rotateX(360deg);
}
}
.rotating{
-webkit-animation: spin .5s infinite linear;
-webkit-transition: background-position .7s;
}
任何人都可以就如何实现这一目标提供任何见解？ Here是我到目前为止。任何帮助是赞赏。
谢谢
解决方法
经过多次研究剽窃，我想出了这一点。希望它有助于形状或形式。
const POSTERS_PER_ROW = 12;
const RING_RADIUS = 200;
function setup_posters(row) {
var posterAngle = 360 / POSTERS_PER_ROW;
for (var i = 0; i < POSTERS_PER_ROW; i++) {
var poster = document.createElement('div');
poster.className = 'poster';
// compute and assign the transform for this poster
var transform = 'rotateY(' + (posterAngle * i) + 'deg) translateZ(' + RING_RADIUS + 'px)';
poster.style.webkitTransform = transform;
// setup the number to show inside the poster
var content = poster.appendChild(document.createElement('p'));
content.textContent = i;
// add the poster to the row
//row.appendChild(poster);
}
}
function init() {
setup_posters(document.getElementById('ring-1'));
setup_posters(document.getElementById('ring-2'));
setup_posters(document.getElementById('ring-3'));
}
// call init once the document is fully loaded
window.addEventListener('load',init,false);
body {
font-family: 'Lucida Grande',Verdana,Arial;
font-size: 12px;
}
#stage {
margin: 150px auto;
width: 600px;
height: 400px;
/*
Setting the perspective of the contents of the stage
but not the stage itself
*/
-webkit-perspective: 800;
}
#rotate {
margin: 0 auto;
width: 600px;
height: 400px;
/* Ensure that we're in 3D space */
-webkit-transform-style: preserve-3d;
/*
Make the whole set of rows use the x-axis spin animation
for a duration of 7 seconds,running infinitely and linearly
*/
/* -webkit-animation-name: x-spin;
-webkit-animation-duration: 7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;*/
}
.ring {
margin: 0 auto;
height: 110px;
width: 600px;
-webkit-transform-style: preserve-3d;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.ring >:nth-child(odd) {
background-color: #995C7F;
}
.ring >:nth-child(even) {
background-color: #835A99;
}
.poster {
position: absolute;
left: 250px;
width: 100px;
height: 100px;
opacity: 0.7;
color: rgba(0,0.9);
-webkit-border-radius: 10px;
}
.poster > p {
font-family: 'Georgia',serif;
font-size: 36px;
font-weight: bold;
text-align: center;
margin-top: 28px;
}
/*
Set up each row to have a different animation duration
and alternating y-axis rotation directions.
*/
#ring-1 {
-webkit-animation-name: x-spin;
-webkit-animation-duration: 2s;
}
/*
#ring-2 {
-webkit-animation-name: back-y-spin;
-webkit-animation-duration: 4s;
}
#ring-3 {
-webkit-animation-name: y-spin;
-webkit-animation-duration: 3s;
}*/
/*
Here we define each of the three individual animations that
we will be using to have our 3D rotation effect. The first
animation will perform a full rotation on the x-axis,we'll
use that on the whole set of objects. The second and third
animations will perform a full rotation on the y-axis in
opposite directions,alternating directions between rows.
Note that you currently have to specify an intermediate step
for rotations even when you are using individual transformation
constructs.
*/
@-webkit-keyframes x-spin {
0% {
-webkit-transform: rotateX(0deg);
}
50% {
-webkit-transform: rotateX(180deg);
}
100% {
-webkit-transform: rotateX(360deg);
}
}
@-webkit-keyframes y-spin {
0% {
-webkit-transform: rotateY(0deg);
}
50% {
-webkit-transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(360deg);
}
}
@-webkit-keyframes back-y-spin {
0% {
-webkit-transform: rotateY(360deg);
}
50% {
-webkit-transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(0deg);
}
}
<h1>//BOTCHED Poster Circle</h1>
<strike>
<p>//This is a simple example of how to use CSS transformation and animations to get interesting-looking behavior.</p>
<p>The three rings are constructed using a simple JavaScript function that creates elements and assigns them a transform
that describes their position in the ring. CSS animations are then used to rotate each ring,and to spin the containing
element around too.</p>
<p>Note that you can still select the numbers on the ring; everything remains clickable.</p>
</strike>
<p>Taken from <a href="http://www.webkit.org/blog-files/3d-transforms/poster-circle.html">HERE</a>
</p>
<div id="stage">
<div id="rotate">
<div id="ring-1" class="ring">
<div class="poster" style="-webkit-transform: rotateX(0deg) translateZ(200px); ">
<p>0</p>
</div>
<div class="poster" style="-webkit-transform: rotateX(30deg) translateZ(200px); ">
<p>1</p>
</div>
<div class="poster" style="-webkit-transform: rotateX(60deg) translateZ(200px); ">
<p>2</p>
</div>
<div class="poster" style="-webkit-transform: rotateX(90deg) translateZ(200px); ">
<p>3</p>
</div>
<div class="poster" style="-webkit-transform: rotateX(120deg) translateZ(200px); ">
<p>4</p>
</div>
<div class="poster" style="-webkit-transform: rotateX(150deg) translateZ(200px); ">
<p>5</p>
</div>
<div class="poster" style="-webkit-transform: rotateX(180deg) translateZ(200px); ">
<p>6</p>
</div>
<div class="poster" style="-webkit-transform: rotateX(210deg) translateZ(200px); ">
<p>7</p>
</div>
<div class="poster" style="-webkit-transform: rotateX(240deg) translateZ(200px); ">
<p>8</p>
</div>
<div class="poster" style="-webkit-transform: rotateX(270deg) translateZ(200px); ">
<p>9</p>
</div>
<div class="poster" style="-webkit-transform: rotateX(300deg) translateZ(200px); ">
<p>10</p>
</div>
<div class="poster" style="-webkit-transform: rotateX(330deg) translateZ(200px); ">
<p>11</p>
</div>
</div>
</div>
</div>
