在实际操作中拍的照片有时候不满足需求，需要进行旋转。这个操作可以将图片传到后台进行旋转之后再传至前端显示。但是这样增加了前后端的数据传输，所以想直接再web上对图片进行旋转操作。
1、CSS3 transform
css3 的transform属性允许我们旋转、缩放和移动元素。 可以通过给它传递一个 rotate(度数) 值来旋转一个元素，正值表示顺时针方向旋转，负值表示逆时针方向旋转，旋转的中心点为元素的中心。代码如下：
<!DOCTYPE html> <html> <head> <title>CSS旋转图片</title> <style> #div2 { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -moz-transform: rotate(30deg); /* Firefox */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ } #div3 { transform: rotate(90deg); ms-transform: rotate(90deg); /* IE 9 */ moz-transform: rotate(90deg); /* Firefox */ webkit-transform: rotate(90deg); /* Safari and Chrome */ o-transform: rotate(90deg); /* Opera */ } #div4{ transform: rotate(120deg); ms-transform: rotate(120deg); /* IE 9 */ moz-transform: rotate(120deg); /* Firefox */ webkit-transform: rotate(120deg); /* Safari and Chrome */ o-transform: rotate(120deg); /* Opera */ } </style> </head> <body> <div id="div1">你好,这是一个原始的div元素</div> <div id="div2">你好,这是一个 旋转了30°的div 元素。你好,这是一个 旋转了30°的div 元素。你好,这是一个 旋转了30°的div 元素。你好,这是一个 旋转了30°的div 元素。</div> <div id="div3">你好。这是一个旋转了90°的 div 元素。你好。这是一个旋转了90°的 div 元素。你好。这是一个旋转了90°的 div 元素。</div> <div id="div4">你好。这是一个旋转了120°的 div 元素。你好。这是一个旋转了120°的 div 元素。你好。这是一个旋转了120°的 div 元素。</div> 原图 <img src="http://www.baidu.com/img/bd_logo1.png" alt="Flowers" style="width:20%;height:20%"><br /><br /><br /> 90°旋转后的图片 <img src="http://www.baidu.com/img/bd_logo1.png" alt="Flowers" style='width:20%;height:20%;transform:rotate(90deg)'> </body>= </html>
使用transform点击图片旋转
<script> window.onload = function(){ var current = 0; document.getElementById('target').onclick = function(){ current = (current+90)%360; this.style.transform = 'rotate('+current+'deg)'; } }; </script> ...... <img id="target" src="http://www.baidu.com/img/bd_logo1.png">
其他旋转方式有：https://www.itdaan.com/blog/2012/10/13/659ae1844b7d5dbe45161b4c7c4118f6.html
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)
