CSS3 rotate()
關於transform變換更多內容可以參閱CSS3 2D/3D轉換一章節。
此方法用來規定指定元素在二維空間中的旋轉。
既然是二維空間旋轉,所以只能夠圍繞Z軸進行旋轉。
語法結構:
[CSS] 純文字檢視 複製程式碼rotate(angle)
引數解析:
angle:規定旋轉的角度;如果為負值,那麼將會逆時針旋轉。
程式碼例項:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box{ position:relative; height:200px; width:200px; margin-top:150px; margin-left:150px; border:1px solid black; } #ant{ padding:50px; position:absolute; border:1px solid black; background-color:yellow; font-size:12px; transform-origin:0px 0px; transform:rotate(0deg); } table{ font-size:12px; width:300px; margin-left:120px; } .left{text-align:right} </style> <script type="text/javascript"> function changeRot(value){ var ant = document.getElementById('ant'); var opersp=document.getElementById('persp'); ant.style.transform = "rotateZ(" + value + "deg)"; opersp.innerHTML = value + "deg"; } window.onload=function(){ var range=document.getElementById("range"); range.onmousemove=function(){ changeRot(this.value); } } </script> </head> <body> <div id="box"> <div id="ant">螞蟻部落</div> </div> <table> <tr> <td class="left">旋轉:</td> <td><input type="range" min="-360" max="360" id="range" value="0"/></td> </tr> <tr> <td class="left">旋轉角度:</td> <td>(<span id="persp">0deg</span>)</td> </tr> </table> </body> </html>
上面的程式碼利用js演示了transform:rotate()方法的功能。
相關文章
- CSS3 rotate3d(x,y,z,angle)CSSS33D
- canvas rotate()Canvas
- [LeetCode] Rotate StringLeetCode
- 48. Rotate Image
- Rotate Array@LeetCodeLeetCode
- [LeetCode] 61. Rotate ListLeetCode
- Leetcode 61. Rotate ListLeetCode
- CSS rotate3d(x,y,z,angle)CSS3D
- codeforces 1209E1 Rotate Columns (easy version)
- canvas translate()、scale()和rotate()方法程式碼例項Canvas
- 帶你理解transform:rotate(含三維檢視)ORM
- 常用的畫素操作演算法:Resize、Flip、Rotate演算法
- 題解:CF1209E1 Rotate Columns (easy version)
- 圖解:什麼是旋轉陣列(Rotate Array)?圖解陣列
- CSS3CSSS3
- 【 開源計劃 - 元件包 】 旋轉切換 toggle_rotate元件
- CSS3簡明教程之初識CSS3CSSS3
- CSS3 quotesCSSS3
- css3省略……CSSS3
- CSS3 remCSSS3REM
- CSS3 vhCSSS3
- CSS3 vwCSSS3
- CSS3 vmaxCSSS3
- CSS3 vminCSSS3
- CSS3 TransitionCSSS3
- CSS3 @supportsCSSS3
- CSS3 currentColorCSSS3
- CSS3 clipCSSS3
- CSS3 ::SelectionCSSS3
- CSS3 counter()CSSS3
- CSS3 attr()CSSS3
- CSS3 orderCSSS3
- CSS3 @keyframesCSSS3
- CSS3 columnsCSSS3
- Qt 從 QTransform 逆向解出 Translate/Scale/Rotate(平移/縮放/旋轉)分析QTORM
- Android基礎動畫之alpha透明度/translate平移/rotate旋轉Android動畫
- Code for Rotate-and-Render: Unsupervised Photorealistic Face Rotation from Single-View Images (CVPR 2020)View
- css3 漸變CSSS3