JQuery：如何使用弯曲效果制作3D操纵杆图像？

时间：2015-01-13 12:39:16

标签： javascript jquery css css3

我正在创建一个应用程序，我需要3D操纵杆图像，以便用户可以在其上滑动，图像将在翻转方向弯曲。

对于向下滑动或向上滑动事件，我应该给出什么样的CSS或动画效果才能使图像向下移动或向上移动？

我不知道最好的方法。我正在尝试这段代码： - 

 <div style="width:220px;height:220px;background-color:black;display:table-cell; vertical-align:middle; text-align:center" id="joy_div">
        <img id="joystick" src="joystick.png" >
</div>

<script>
$("#joy_div").rotate({ 
    bind: 
    { 
        swipeleft : function() { 
            $("#joystick").rotate({animateTo:-50});
        },
        swiperight : function() { 
            $("#joystick").rotate({animateTo:50});
        },
        swipeup : function(){
            alert('up');
        },
        swipedown : function(){
            alert('down');
        },
        swipeend : function(){
            $("#joystick").rotate({animateTo:0});
        }
    }); 
</script>

我感谢任何指导。

2 个答案:

答案 0 :(得分：4)

我建议您使用CSS transform和perspective来执行此操作。

在下面的示例中，我使用了swipeLeft，swipeRight，swipeUp和swipeDown事件的按钮演示了这一点。

＆＃13;
＆＃13; 
$(".tilt").click(function() {
  $('#joystick').removeAttr('class');
  $('#joystick').addClass($(this).attr('id'));
});
＆＃13; 
#joy_div {
  perspective: 500px;
}
button {
  margin: 10px 0 0 0;
}
.left, .right, .down, .up, .reset {
  transition: transform 0.5s ease;
  transform-origin: 50% 50%;
}
.left {
  transform: rotateY(-40deg);
}
.right {
  transform: rotateY(40deg);
}
.up {
  transform: rotateX(-40deg);
}
.down {
  transform: rotateX(40deg);
}
.reset {
  transform: rotateX(0) rotateY(0);
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="width:250px;height:160px;display:table-cell; vertical-align:middle; text-align:center" id="joy_div">
  <img id="joystick" width="250" height="160" src="http://help.robotc.net/WebHelpArduino/scr/TETRIX_MATRIX_New/NXT_Using_Joysticks_files/Joystick_front.gif" />
</div>
<button class="tilt" id="left">swipeleft</button>
<button class="tilt" id="right">swiperight</button>
<button class="tilt" id="up">swipeup</button>
<button class="tilt" id="down">swipedown</button>
<button class="tilt" id="reset">Reset</button>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

这样的东西？ （虽然这是一个非常粗糙的设计，并没有完全实现）

＆＃13;
＆＃13; 
$('#left').click(function(){
  $('.stick').removeClass("right").toggleClass("left");
});
$('#right').click(function(){
  $('.stick').removeClass("left").toggleClass("right");
});
＆＃13; 
.wrapper{
  width:300px;
  height:300px;
  background:gray;
  }

.stick{
  height:30px;
  width:30px;
  border-radius:50%;
  background:red;
  margin:0 auto;
  position:relative;
  z-index:5;
}

.stick:after{
  content:"";
  position:absolute;
  height:200px;
  width:20px;
  background:red;
  bottom:-180px;
  left:15%;
  z-index:2;
  }

.joy{
  
  height:30px;
  width:100%;
  background:darkgray;
  margin-top:170px;
  position:relative;
  z-index:20;
  }

.left{
  transform:rotate(-20deg);
  left:-50px;
  }

.right{
  transform:rotate(20deg);
  left:50px;
  }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
   <div class="stick"></div>
  <div class="joy"></div>

</div>

<button id="left">left</button>
<button id="right">right</button>
＆＃13;
＆＃13;
＆＃13;

至于＆＃39; up＆＃39;并且＆＃39; down＆＃39;动作，您可能想要查看3d perspective css属性。

如果您能够使用SCSS，您可能需要查看：

如果没有，我认为像this这样的东西也会有益于

令人难以置信的例子〜SOURCE不是我做的

＆＃13;
＆＃13; 
* {
    padding: 0;
    margin: 0;
}

html , body {
    width: 100%;
    height: 100%:
    overflow: hidden;
    position: fixed;
    top: 0%;
    left: 0%;
}

html {
    background-color: rgba(240,255,255,1);    
}

#letter {
    font-size: 120px;
    font-family: Helvetica;
    font-weight: Bold;
    color: rgba(18,22,26,0.7);
    width: 120px;
    height: 120px;
    text-align: center;
    vertical-align: middle;
    line-height: 120px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -60px;
    margin-left: -60px;
    opacity: 1;
    z-index: -1;
}

#description {
    position: fixed;
    bottom: 10px;
    width: 100%;
    z-index: 100;
    font-family: Helvetica;
    font-weight: 200;
    color: rgba(18,22,26,0.7);
    text-align: center;
    font-size: 11px;
    letter-spacing: 1px;
}

#animation {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    z-index: 1;
}

.base {
    width: 170px;
    height: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -85px;
    margin-top: 95px;
    background-color: rgba(123,126,129,1);
    z-index: -1;
}

.base:after {
    border-bottom: 40px solid rgba(193,196,199,1);
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
    position: absolute;
    top: -85px;
    left: 0px;
    width: 130px;
    height: 45px;
    content: "";
}

.button {
    width: 16px;
    height: 35px;
    background-color: rgba(23,26,29,0.5);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-transform: scale( 1 , 0.35 );
    -moz-transform: scale( 1 , 0.35 );
    -ms-transform: scale( 1 , 0.35 );
    -o-transform: scale( 1 , 0.35 );
    transform: scale( 1 , 0.35 );
    border-radius: 10px;
}

.button:after {
    content: "";
    width: 16px;
    height: 16px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(255,115,110,1);
    border-radius: 20px;
}

#animation .button:nth-of-type(1) {
    margin-top: 50px;
    margin-left: 30px;
    animation: baseButton 6s ease 0s infinite alternate none;
	-webkit-animation: baseButton 6s ease 0s infinite alternate none;
}

#animation .button:nth-of-type(2) {
    margin-top: 55px;
    margin-left: 50px;
    animation: baseButton 6.5s ease 2s infinite alternate none;
	-webkit-animation: baseButton 6.5s ease 2s infinite alternate none;
}

.stick {
    background-color: rgba(123,126,129,1);
    width: 22px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -11px;
    margin-top: -65px;
    z-index: 10;
    -webkit-transform-origin: center 180px;
    transform-origin: center 180px;
    animation: stick 7s ease-in-out 0s infinite alternate none;
	-webkit-animation: stick 7s ease-in-out 0s infinite alternate none;
}

.stick:after {
    -webkit-transform: scale( 1 , 0.25 );
    -moz-transform: scale( 1 , 0.25 );
    -ms-transform: scale( 1 , 0.25 );
    -o-transform: scale( 1 , 0.25 );
    transform: scale( 1 , 0.25 );
    background-color: rgba(193,196,199,1);
    border-radius: 34px;
    position: absolute;
    top: -11px;
    left: 0;
    width: 22px;
    height: 22px;
    content: "";
}

.stick:before {
    -webkit-transform: scale( 1 , 0.35 );
    -moz-transform: scale( 1 , 0.35 );
    -ms-transform: scale( 1 , 0.35 );
    -o-transform: scale( 1 , 0.35 );
    transform: scale( 1 , 0.35 );
    background-color: rgba(123,126,129,1);
    border-radius: 34px;
    position: absolute;
    top: 90px;
    left: 0;
    width: 22px;
    height: 22px;
    content: "";
}

.stick .topButton {
    width: 16px;
    height: 35px;
    background-color: rgba(103,106,109,1);
    position: absolute;
    top: 0%;
    left: 0%;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-transform: scale( 1 , 0.25 );
    -moz-transform: scale( 1 , 0.25 );
    -ms-transform: scale( 1 , 0.25 );
    -o-transform: scale( 1 , 0.25 );
    transform: scale( 1 , 0.25 );
    border-radius: 10px;
    margin-left: 3px;
    margin-top: -34px;
    z-index: 20;
    animation: baseButton 3.5s ease -2s infinite alternate forwards;
	-webkit-animation: baseButton 3.5s ease -2s infinite alternate forwards;
}

.stick .topButton:after {
    content: "";
    width: 16px;
    height: 16px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(255,115,110,1);
    border-radius: 20px;
}

.stick .bottom {
    -webkit-transform: scale( 1 , 0.55 );
    -moz-transform: scale( 1 , 0.55 );
    -ms-transform: scale( 1 , 0.55 );
    -o-transform: scale( 1 , 0.55 );
    transform: scale( 1 , 0.55 );
    width: 16px;
    height: 35px;
    border-radius: 20px;
    position: absolute;
    bottom: -25px;
    left: 3px;
    z-index: -1;
    background-color: rgba(83,86,89,1);
}

.stick .support {
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: -41px;
    left: -9px;
    background-color: rgba(48,50,54,1);
    border-radius: 80px;
    -webkit-transform: scale( 1 , 0.45 );
    -moz-transform: scale( 1 , 0.45 );
    -ms-transform: scale( 1 , 0.45 );
    -o-transform: scale( 1 , 0.45 );
    transform: scale( 1 , 0.45 );
    z-index: -5;
}

.rubber {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    margin-left: -40px;
    margin-top: 25px;
    background-color: rgba(38,42,46,1);
    border-radius: 80px;
    -webkit-transform: scale( 1 , 0.35 );
    -moz-transform: scale( 1 , 0.35 );
    -ms-transform: scale( 1 , 0.35 );
    -o-transform: scale( 1 , 0.35 );
    transform: scale( 1 , 0.35 );
    z-index: 1;
}

.cord {
    border-top: 3px solid rgba(38,42,46,1);
    border-left: 3px solid rgba(38,42,46,1);
    border-top-left-radius: 40px;
    width: 30%;
    height: 20px;
    position: absolute;
    margin-top: 80px;
    top: 50%;
    left: 20%;
    z-index: -20;
}

.wallcord {
    border-bottom: 3px solid rgba(38,42,46,1);
    border-right: 3px solid rgba(38,42,46,1);
    border-bottom-right-radius: 40px;
    width: 20%;
    height: 60px;
    position: absolute;
    margin-top: 100px;
    top: 50%;
    left: 0%;
    z-index: -20;
}

@keyframes baseButton {
	64% { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 );} 
	62% { -webkit-transform: scale( 1 , 0.15 ); -moz-transform: scale( 1 , 0.15 ); -ms-transform: scale( 1 , 0.15 ); -o-transform: scale( 1 , 0.15 ); transform: scale( 1 , 0.15 );} 
	60% { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 );} 
	100% { -webkit-transform: scale( 1 , 0.15 ); -moz-transform: scale( 1 , 0.15 ); -ms-transform: scale( 1 , 0.15 ); -o-transform: scale( 1 , 0.15 ); transform: scale( 1 , 0.15 );} 
	18% { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 );} 
	16% { -webkit-transform: scale( 1 , 0.15 ); -moz-transform: scale( 1 , 0.15 ); -ms-transform: scale( 1 , 0.15 ); -o-transform: scale( 1 , 0.15 ); transform: scale( 1 , 0.15 );} 
	0% { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 );} 
	98% { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 );} 
	14% { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 );} 
	10% { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 );} 
	12% { -webkit-transform: scale( 1 , 0.15 ); -moz-transform: scale( 1 , 0.15 ); -ms-transform: scale( 1 , 0.15 ); -o-transform: scale( 1 , 0.15 ); transform: scale( 1 , 0.15 );} 
}

@-webkit-keyframes baseButton {
	64% { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 );} 
	62% { -webkit-transform: scale( 1 , 0.15 ); -moz-transform: scale( 1 , 0.15 ); -ms-transform: scale( 1 , 0.15 ); -o-transform: scale( 1 , 0.15 ); transform: scale( 1 , 0.15 );} 
	60% { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 );} 
	100% { -webkit-transform: scale( 1 , 0.15 ); -moz-transform: scale( 1 , 0.15 ); -ms-transform: scale( 1 , 0.15 ); -o-transform: scale( 1 , 0.15 ); transform: scale( 1 , 0.15 );} 
	18% { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 );} 
	16% { -webkit-transform: scale( 1 , 0.15 ); -moz-transform: scale( 1 , 0.15 ); -ms-transform: scale( 1 , 0.15 ); -o-transform: scale( 1 , 0.15 ); transform: scale( 1 , 0.15 );} 
	0% { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 );} 
	98% { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 );} 
	14% { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 );} 
	10% { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 );} 
	12% { -webkit-transform: scale( 1 , 0.15 ); -moz-transform: scale( 1 , 0.15 ); -ms-transform: scale( 1 , 0.15 ); -o-transform: scale( 1 , 0.15 ); transform: scale( 1 , 0.15 );} 
}

@keyframes stick {
	5% { -webkit-transform: rotate( 20deg ); -moz-transform: rotate( 20deg ); -ms-transform: rotate( 20deg ); -o-transform: rotate( 20deg ); transform: rotate( 20deg );} 
	100% { -webkit-transform: rotate( -5deg ); -moz-transform: rotate( -5deg ); -ms-transform: rotate( -5deg ); -o-transform: rotate( -5deg ); transform: rotate( -5deg );} 
	97% { -webkit-transform: rotate( 20deg ); -moz-transform: rotate( 20deg ); -ms-transform: rotate( 20deg ); -o-transform: rotate( 20deg ); transform: rotate( 20deg );} 
	94% { -webkit-transform: rotate( 0deg ); -moz-transform: rotate( 0deg ); -ms-transform: rotate( 0deg ); -o-transform: rotate( 0deg ); transform: rotate( 0deg );} 
	87% { -webkit-transform: rotate( -5deg ); -moz-transform: rotate( -5deg ); -ms-transform: rotate( -5deg ); -o-transform: rotate( -5deg ); transform: rotate( -5deg );} 
	84% { -webkit-transform: rotate( 20deg ); -moz-transform: rotate( 20deg ); -ms-transform: rotate( 20deg ); -o-transform: rotate( 20deg ); transform: rotate( 20deg );} 
	82% { -webkit-transform: rotate( 5deg ); -moz-transform: rotate( 5deg ); -ms-transform: rotate( 5deg ); -o-transform: rotate( 5deg ); transform: rotate( 5deg );} 
	74% { -webkit-transform: rotate( 5deg ); -moz-transform: rotate( 5deg ); -ms-transform: rotate( 5deg ); -o-transform: rotate( 5deg ); transform: rotate( 5deg );} 
	68% { -webkit-transform: rotate( -20deg ); -moz-transform: rotate( -20deg ); -ms-transform: rotate( -20deg ); -o-transform: rotate( -20deg ); transform: rotate( -20deg );} 
	65% { -webkit-transform: rotate( 0deg ); -moz-transform: rotate( 0deg ); -ms-transform: rotate( 0deg ); -o-transform: rotate( 0deg ); transform: rotate( 0deg );} 
	53% { -webkit-transform: rotate( 6deg ); -moz-transform: rotate( 6deg ); -ms-transform: rotate( 6deg ); -o-transform: rotate( 6deg ); transform: rotate( 6deg );} 
	50% { -webkit-transform: rotate( 10deg ); -moz-transform: rotate( 10deg ); -ms-transform: rotate( 10deg ); -o-transform: rotate( 10deg ); transform: rotate( 10deg );} 
	48% { -webkit-transform: rotate( -5deg ); -moz-transform: rotate( -5deg ); -ms-transform: rotate( -5deg ); -o-transform: rotate( -5deg ); transform: rotate( -5deg );} 
	47% { -webkit-transform: rotate( 0deg ); -moz-transform: rotate( 0deg ); -ms-transform: rotate( 0deg ); -o-transform: rotate( 0deg ); transform: rotate( 0deg );} 
	42% { -webkit-transform: rotate( -15deg ); -moz-transform: rotate( -15deg ); -ms-transform: rotate( -15deg ); -o-transform: rotate( -15deg ); transform: rotate( -15deg );} 
	40% { -webkit-transform: rotate( 0deg ); -moz-transform: rotate( 0deg ); -ms-transform: rotate( 0deg ); -o-transform: rotate( 0deg ); transform: rotate( 0deg );} 
	33% { -webkit-transform: rotate( 0deg ); -moz-transform: rotate( 0deg ); -ms-transform: rotate( 0deg ); -o-transform: rotate( 0deg ); transform: rotate( 0deg );} 
	22% { -webkit-transform: rotate( 10deg ); -moz-transform: rotate( 10deg ); -ms-transform: rotate( 10deg ); -o-transform: rotate( 10deg ); transform: rotate( 10deg );} 
	17% { -webkit-transform: rotate( 0deg ); -moz-transform: rotate( 0deg ); -ms-transform: rotate( 0deg ); -o-transform: rotate( 0deg ); transform: rotate( 0deg );} 
	0% { -webkit-transform: rotate( -5deg ); -moz-transform: rotate( -5deg ); -ms-transform: rotate( -5deg ); -o-transform: rotate( -5deg ); transform: rotate( -5deg );} 
}

@-webkit-keyframes stick {
	5% { -webkit-transform: rotate( 20deg ); -moz-transform: rotate( 20deg ); -ms-transform: rotate( 20deg ); -o-transform: rotate( 20deg ); transform: rotate( 20deg );} 
	100% { -webkit-transform: rotate( -5deg ); -moz-transform: rotate( -5deg ); -ms-transform: rotate( -5deg ); -o-transform: rotate( -5deg ); transform: rotate( -5deg );} 
	97% { -webkit-transform: rotate( 20deg ); -moz-transform: rotate( 20deg ); -ms-transform: rotate( 20deg ); -o-transform: rotate( 20deg ); transform: rotate( 20deg );} 
	94% { -webkit-transform: rotate( 0deg ); -moz-transform: rotate( 0deg ); -ms-transform: rotate( 0deg ); -o-transform: rotate( 0deg ); transform: rotate( 0deg );} 
	87% { -webkit-transform: rotate( -5deg ); -moz-transform: rotate( -5deg ); -ms-transform: rotate( -5deg ); -o-transform: rotate( -5deg ); transform: rotate( -5deg );} 
	84% { -webkit-transform: rotate( 20deg ); -moz-transform: rotate( 20deg ); -ms-transform: rotate( 20deg ); -o-transform: rotate( 20deg ); transform: rotate( 20deg );} 
	82% { -webkit-transform: rotate( 5deg ); -moz-transform: rotate( 5deg ); -ms-transform: rotate( 5deg ); -o-transform: rotate( 5deg ); transform: rotate( 5deg );} 
	74% { -webkit-transform: rotate( 5deg ); -moz-transform: rotate( 5deg ); -ms-transform: rotate( 5deg ); -o-transform: rotate( 5deg ); transform: rotate( 5deg );} 
	68% { -webkit-transform: rotate( -20deg ); -moz-transform: rotate( -20deg ); -ms-transform: rotate( -20deg ); -o-transform: rotate( -20deg ); transform: rotate( -20deg );} 
	65% { -webkit-transform: rotate( 0deg ); -moz-transform: rotate( 0deg ); -ms-transform: rotate( 0deg ); -o-transform: rotate( 0deg ); transform: rotate( 0deg );} 
	53% { -webkit-transform: rotate( 6deg ); -moz-transform: rotate( 6deg ); -ms-transform: rotate( 6deg ); -o-transform: rotate( 6deg ); transform: rotate( 6deg );} 
	50% { -webkit-transform: rotate( 10deg ); -moz-transform: rotate( 10deg ); -ms-transform: rotate( 10deg ); -o-transform: rotate( 10deg ); transform: rotate( 10deg );} 
	48% { -webkit-transform: rotate( -5deg ); -moz-transform: rotate( -5deg ); -ms-transform: rotate( -5deg ); -o-transform: rotate( -5deg ); transform: rotate( -5deg );} 
	47% { -webkit-transform: rotate( 0deg ); -moz-transform: rotate( 0deg ); -ms-transform: rotate( 0deg ); -o-transform: rotate( 0deg ); transform: rotate( 0deg );} 
	42% { -webkit-transform: rotate( -15deg ); -moz-transform: rotate( -15deg ); -ms-transform: rotate( -15deg ); -o-transform: rotate( -15deg ); transform: rotate( -15deg );} 
	40% { -webkit-transform: rotate( 0deg ); -moz-transform: rotate( 0deg ); -ms-transform: rotate( 0deg ); -o-transform: rotate( 0deg ); transform: rotate( 0deg );} 
	33% { -webkit-transform: rotate( 0deg ); -moz-transform: rotate( 0deg ); -ms-transform: rotate( 0deg ); -o-transform: rotate( 0deg ); transform: rotate( 0deg );} 
	22% { -webkit-transform: rotate( 10deg ); -moz-transform: rotate( 10deg ); -ms-transform: rotate( 10deg ); -o-transform: rotate( 10deg ); transform: rotate( 10deg );} 
	17% { -webkit-transform: rotate( 0deg ); -moz-transform: rotate( 0deg ); -ms-transform: rotate( 0deg ); -o-transform: rotate( 0deg ); transform: rotate( 0deg );} 
	0% { -webkit-transform: rotate( -5deg ); -moz-transform: rotate( -5deg ); -ms-transform: rotate( -5deg ); -o-transform: rotate( -5deg ); transform: rotate( -5deg );} 
}
＆＃13; 
<div id="letter">J</div>
<div id="description">is for Joystick</div>

<div id="animation">
    <div class="button"></div>
    <div class="button"></div>
    <div class="stick">
        <div class="topButton"></div>
        <div class="bottom"></div>
        <div class="support"></div>
    </div>
    <div class="rubber"></div>
    <div class="base"></div>
    <div class="cord"></div>
    <div class="wallcord"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题