旋轉字符的HTML按鈕

我想讓一個按鈕顯示在屏幕上，旁邊是一個字符輸入字段。當用戶點擊按鈕時，角色將旋轉1度，點擊5次，它會旋轉5度，按住它並旋轉。旋轉字符的HTML按鈕

我也很喜歡當前顯示給用戶的旋轉度（這對於我想在最後構建的東西非常重要）。

目前我有HTML：

<h2 class="rotate10"> P</h2>

CSS：

.rotate10{ 

    /* Safari */ 
    -webkit-transform: rotate(-10deg); 

    /* Firefox */ 
    -moz-transform: rotate(-10deg); 

    /* IE */ 
    -ms-transform: rotate(-10deg); 

    /* Opera */ 
    -o-transform: rotate(-10deg); 

    /* Internet Explorer */ 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
}

來源

2016-02-26 Kōdo no musō-ka

你試過用javascript嗎？ –

嘗試是這樣的

var count = 0; 
 
var target = $('h2'); 
 

 
$('button').mousedown(function(){ 
 
    target = setInterval(function(){ 
 
     count++; 
 
     $('h2').css('transform', 'rotate('+count+'deg)'); 
 
     $('p').text('Rotated ' + count + 'deg'); 
 
    }, 100); 
 
    return false; 
 
}); 
 

 
$(document).mouseup(function(){ 
 
    clearInterval(target); 
 
    return false; 
 
});

button { 
 
    display: block; 
 
} 
 

 
p { 
 
    margin: 0; 
 
} 
 

 
h2 { 
 
    display: inline-block; 
 
    transform-origin: center; 
 
    font-size: 50px; 
 
    margin-top: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Rotate</button> 
 
<p>Rotated 0deg</p> 
 
<h2 class="rotate10">P</h2>

來源

2016-02-26 13:26:54

優秀刪除.find（「跨度」），是有什麼辦法顯示角色的當前旋轉角度？ –

更新了我的答案 –

需要分配上點擊

http://jsfiddle.net/NourSammour/pu58xsmg/6/

var angle = 10;  

$('#line').click(function() { 
    $(this).find('span').css ({ 
     '-webkit-transform': 'rotate(' + angle + 'deg)', 
      '-moz-transform': 'rotate(' + angle + 'deg)', 
      '-o-transform': 'rotate(' + angle + 'deg)', 
      '-ms-transform': 'rotate(' + angle + 'deg)' 
    }); 
    angle+=10; 
});

變換CSS屬性顯示當前的角/度可以顯示angle可變

來源

2016-02-26 13:17:06

不錯，但是;我將如何讓它爲多個角色工作？一個 b Ç –

你可以刪除的跨度和按鈕本身採用旋轉所以從1- 2 - 選擇刪除跨度從HTML –

<button id="ex" style="width:40px"> 
    hello 
</button>

var count=1 
    $("#ex").on("click",function(){ 
     $("#ex").css({"-ms-transform":" rotate("+10*count+"deg)"}); 
     $("#ex").css({"-webkit-transform":" rotate("+10*count+"deg)"}); 
     $("#ex").css({"transform":"rotate("+10*count+"deg)"}); 
     count++; 
    });

來源

2016-02-26 13:18:32

結合努爾的解決方案（只聽取onClick）和t他從this thread回答我創建了這個小提琴：http://jsfiddle.net/ea6zycpk/

var angle = 1;  
var timeoutId = 0; 
var timeoutId2 = 0; 

$('#line').mousedown(function() { 
    timeoutId = setInterval(rotate, 20); 
    timeoutId2 = setInterval(update, 20); 
}).on('mouseup mouseleave', function() { 
    clearInterval(timeoutId); 
    clearInterval(timeoutId2); 
}); 

function rotate() { 
    $('#line').find('span').css ({ 
     '-webkit-transform': 'rotate(' + angle + 'deg)', 
      '-moz-transform': 'rotate(' + angle + 'deg)', 
      '-o-transform': 'rotate(' + angle + 'deg)', 
      '-ms-transform': 'rotate(' + angle + 'deg)' 
    }); 
    angle+=1; 
}; 

function update() { 
    $('#angle').text(angle); 
}

來源

2016-02-26 13:53:01 dasjanik

旋轉字符的HTML按鈕

回答

相關問題