文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >JQuery:如何制作具有弯曲效果的3D Joystick图像？

问JQuery:如何制作具有弯曲效果的3D Joystick图像？
EN

Stack Overflow用户
提问于 2015-01-13 12:39:15
回答 2查看 762关注 0票数 0

我正在制作一个应用程序，在那里我需要3d操纵杆图像，以便用户可以滑动它，图像将弯曲的方向。

对于滑动或向上滑动事件，我应该给予什么css或动画效果，以使图像移动下行或向上？

我不知道最好的办法是什么。我正在尝试这个代码:-

代码语言：javascript
复制
 <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>

我很感激你的指导。

javascript
jquery
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-01-13 13:04:40

我建议您使用CSS transform和perspective来完成此操作。

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

​

代码语言：javascript
复制
$(".tilt").click(function() {
  $('#joystick').removeAttr('class');
  $('#joystick').addClass($(this).attr('id'));
});
代码语言：javascript
复制
#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);
}
代码语言：javascript
复制
<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>

​

票数 4
EN

Stack Overflow用户

发布于 2015-01-13 13:23:06

像这样吗？(虽然这是一个非常粗糙的设计，而且没有完全实现)

​

代码语言：javascript
复制
$('#left').click(function(){
  $('.stick').removeClass("right").toggleClass("left");
});
$('#right').click(function(){
  $('.stick').removeClass("left").toggleClass("right");
});
代码语言：javascript
复制
.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;
  }
代码语言：javascript
复制
<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>

​

至于“向上”和“向下”的运动，您可能需要查看3d透视图css属性。

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

  • 这个操纵杆实现

如果不是这样的话，我认为像这这样的东西也是有益的

难以置信的例子~来源不是我做的

​

代码语言：javascript
复制
* {
    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 );} 
}
代码语言：javascript
复制
<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>

​

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/27922408

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档