关于 CSS 中的 transform: rotate，我的需求如此简单，却找不到优雅的解法
autoxbc · 2019-01-20 20:05:11 +08:00 · 2933 次点击这是一个创建于 2135 天前的主题，其中的信息可能已经有所发展或是发生改变。
CSS 中的 transform 属性允许你旋转，缩放，倾斜或平移给定元素
我要写个脚本给图片添加旋转功能，用来快速处理那些方向错误的贴图
示例代码
<!DOCTYPE html>
<head>
<script>
window.onload = () => {
[].slice.call(document.images).forEach( img => {
let degree = 0 ;
img.onclick = () => {
degree = ( degree + 90 ) % 360 ;
img.style = `transform: rotate(${ degree }deg);`;
};
} );
};
</script>
</head>
<body>
<div>
<img src="https://www.v2ex.com/static/img/[email protected]" />
</div>
<div>
<img src="https://www.v2ex.com/static/img/[email protected]" />
</div>
<div>
<img src="http://gzimg.focus.cn/upload/photos/20718/OoQdAPDw.jpg" />
</div>
<div>
<img src="http://gzimg.focus.cn/upload/photos/20718/OoQdAPDw.jpg" />
</div>
</body>
</html>
图片点击旋转后的效果图
简单的说就是，希望旋转的图片，能够像真的在数据层面旋转过一样，正确占据容器中的空间
实际情况是，CSS 旋转的图片被绘制在一个单独的层中，排版上独立于 DOM
没有没什么简单优雅的做法可以实现这个需求？
 |
1
hackyuan 2019-01-20 20:51:40 +08:00  1
只能说并不简单...
1. 决定旋转方向的是 `transform-origin` 这个属性, 而你这四个图形的设定的值都不一样 2. transform 会改变层叠顺序, 也就不会像你想的那样 |
 |
2
iNaru 2019-01-20 21:09:21 +08:00 1
transform 不会触发 reflow，改变的只是视觉上的渲染。
img 外层加一个父节点,根据图片旋转角度动态计算设置父节点的高度和宽度。 transform-origin 可以改变其中心原点。 |
 |
3
1OF7G 2019-01-23 20:13:24 +08:00
transform 肯定是不行的，不会改变元素所占空间。
也许你可以用 js 处理一下图片（ canvas 或图像二进制数据），生成一张旋转后的图片，用生成的新 blob url, 替换当前图片地址。 |
Select Language