1. html怎樣讓圖片的旋轉
css代碼：
.rotator
{
text-align:center;
}
.rotator img {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
}
.rotator img:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
/*360deg是360度，螞殲度你悶橘沖伍巧可以自己寫*/
2. 網頁設計中怎麼實現圖片旋轉
css3 的transform屬性允許我們旋轉、縮放和移動元素。 可以通過給它傳遞一個 rotate(度數) 值來旋轉一個元素，正值表示順時針方向旋轉，負值表示逆時針方向旋轉，旋轉的中心點為元素的中心。
CSS代碼如下：
.rotate{
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}
瀏覽器支持：Firefox 4+、Oprea 10+、Safari 3.1+、Chrome 8+、IE 9+
3. html5如何讓圖片3d旋轉
圖片旋轉可以用CSS3中的動畫效陪早衫果來做，CSS3中，允許使用 3D 轉換來對元素進行格式睜喊化。
示例代碼如下：
<style>
*{margin:0;padding:0;}/*簡單可以自定義，參照上面*/
body{font:14px/1.5 "\5FAE\8F6F\96C5\9ED1","\5B8B\4F53", sans-serif, Arial, System;background-color:#FFF;}
#imgg{animation:imgg 1s linear 0s infinite;}
@keyframes imgg{0% {transform:rotateY(0deg);}25%{transform:rotateY(90deg);}50%{transform:rotateY(180deg);}75%{transform:rotateY(270deg);}100% {transform:rotateY(360deg);}}
</style>
<div id="demo"蘆腔>
<img src="圖片地址" alt="" width="100" height="100" id="imgg">
</div>
4. HTML5中，如何控制canvas旋轉圖片
要控制canvas旋轉圖片需要用到HTML5中canvas的rotate方法。我們通過一個具體的示例進行分析。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圖片旋轉</title>
</head>
<body>
<div id="result-stub" class="well hidden">
<canvas id="canvas" width="345" height="彎仿345">
<p>你的瀏覽器不支持canvas元素</p>
</canvas>
</div>
<script>
window.onload=function() {
//1、 獲取到畫布對象以及畫布的上下文對象
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
//2、 在畫布上進行圖片繪制
var img = new Image();
img.src = 'fist-pump-baby.jpg'碼裂;//這里是繪制圖片的路徑
img.onload = function() {
context.drawImage(img, 0, 0);
}
//3、 設置畫布旋轉
context.rotate(0.2);//通過rotate方法以弧度為參數旋轉圖像
//在rotate中傳入的參數為弧度。如果你對弧度不太了解，在HTML5中還提供了一個函數degreeToRadians（）。它可以將度數轉換為弧度。這里傳入-15，即表示將圖像向左旋轉15度。如需把旋轉的角度轉換為弧度的公式為：( 度數*PI )/ 180。這兩種傳入弧度的方遲鬧閉法你選擇一種即可。
//context.rotate(degreesToRadians(-15));
}
</script>
<script src="jquery.js"></script>
</body>
</html>
這些都是有關於HTML5新特性的一些應用。給你推薦一個教程網站秒秒學，該網站上有關於HTML5新特性的講解，可以去看看，希望對你有幫助。
5. HTML中，怎樣將圖片旋轉90度顯示
1圖片的旋轉實現方式敗蠢有很多，比如js實現，譽渣現在比較簡單的方法是使用css3裡面的；transform屬性來實現，很方便的。其實這個題目很簡單，在網路裡面搜索一下css3旋轉就看到了，裡面慶枯悄的手冊介紹的很清楚，下面是代碼以及顯示效果都呈現出來；
2下面是寫的一個實例代碼，代碼可以直接運行。代碼的解釋有備注哦；總共代碼呢其實沒有幾行，主要就是transform屬性的應用代碼中的90deg就是90度的意思
<!DOCTYPEhtml>
<html>
<head>
<style>
body{margin:0px;padding:0px;}
/*{transform就是專門為img圖片設置的旋轉*/
#img1{transform:rotate(90deg);border:1pxsolidred;}
</style>
</head>
<body>
<imgid="img1"src="38.png"/>/*頁面中顯示的圖片*/
</body>
</html>
3代碼在瀏覽器的運行效果圖：
6. 怎麼在網頁上旋轉圖片呢
1、首先准備一個HTML文檔，文檔中准備好兩個圖片，接下來會對這兩個圖片進行旋轉。
