HTML之使用CSS旋转图片

    在实际操作中拍的照片有时候不满足需求，需要进行旋转。这个操作可以将图片传到后台进行旋转之后再传至前端显示。但是这样增加了前后端的数据传输，所以想直接再web上对图片进行旋转操作。

    1、CSS3 transform

    css3 的transform属性允许我们旋转、缩放和移动元素。 可以通过给它传递一个 rotate(度数) 值来旋转一个元素，正值表示顺时针方向旋转，负值表示逆时针方向旋转，旋转的中心点为元素的中心。代码如下：

    


    
你好,这是一个原始的div元素
    
你好,这是一个 旋转了30°的div 元素。你好,这是一个 旋转了30°的div 元素。你好,这是一个 旋转了30°的div 元素。你好,这是一个 旋转了30°的div 元素。
    
你好。这是一个旋转了90°的 div 元素。你好。这是一个旋转了90°的 div 元素。你好。这是一个旋转了90°的 div 元素。
    
你好。这是一个旋转了120°的 div 元素。你好。这是一个旋转了120°的 div 元素。你好。这是一个旋转了120°的 div 元素。

    原图
    



    90°旋转后的图片
    

=

    使用transform点击图片旋转

......

    其他旋转方式有：https://www.itdaan.com/blog/2012/10/13/659ae1844b7d5dbe45161b4c7c4118f6.html