css 生成旋转图片

你可以使用CSS3中的transform属性来实现旋转图片的效果。下面是一个简单的样例代码:

<img src="your-image-url" class="rotate-image">

<style>
.rotate-image {
  transform: rotate(30deg); /* 30度旋转 */
}
</style>

你可以将 `rotate-image` 类名添加到你的图片元素中，并设置旋转角度来实现你需要的效果。你也可以使用其他值，如负值来控制旋转方向。

相关问题

canvas对图片旋转90度生成新图

Canvas是一个HTML5元素，它提供了一个JavaScript API，用于在网页上绘制图形。如果你想要通过Canvas将图片旋转90度，可以按照以下步骤操作：

1. 首先，你需要获取到图片的`Image`对象，例如通过`new Image()`创建一个新的图像实例，然后设置其src属性指向需要旋转的图片URL。

let img = new Image();
img.src = 'your_image_url';

2. 当图片加载完成之后，你可以调用`onload`事件处理函数，在其中开始处理旋转操作。这里使用CSS rotate()函数结合`context.rotate()`方法，后者是Canvas API的一部分。

img.onload = function() {
    let canvas = document.createElement('canvas');
    let ctx = canvas.getContext('2d');

    // 设置canvas大小等于图片大小
    canvas.width = img.width;
    canvas.height = img.height;

    // 将canvas平移到原点，这样旋转不会影响其他元素的位置
    ctx.translate(canvas.width / 2, canvas.height / 2);

    // 旋转90度
    ctx.rotate(Math.PI / 2); 

    // 绘制图片
    ctx.drawImage(img, -img.width / 2, -img.height / 2);
    
    // 获取旋转后的图片
    let rotatedImg = canvas.toDataURL();
    // 现在rotatedImg变量就包含了旋转90度后的图片数据
};

最后，你可以将`rotatedImg`保存为新的图片，或者显示在页面上作为需要的部分。