关于 CSS 中的 transform: rotate，我的需求如此简单，却找不到优雅的解法
autoxbc 2019-01-20 20:05:11 +08:00 3197 次点击这是一个创建于 2535 天前的主题，其中的信息可能已经有所发展或是发生改变。
CSS 中的 transform 属性允许你旋转，缩放，倾斜或平移给定元素
我要写个脚本给图片添加旋转功能，用来快速处理那些方向错误的贴图
示例代码
<!DOCTYPE html> <head> <script> windowOnload= () => { [].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="static/img/[email protected]" /> </div> <div> <img src="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