html - CSS - 在图像顶部旋转文本

Question

我有一个客户希望最终用户上传一张图像，在这种情况下，按照下图在日记下面进行 super 拼接。

最终用户可以缩放照片并将其向上/向下和向左/向右移动，他们还可以添加文本(跨度在 div 容器内)

<div id="theText" class="productImageOverlay activeText" style="z-index: 7;font-size:20px;">
    <span class="uploadedImage" id="" style="margin-top: -1px; position: absolute;"></span>
</div>

然后我使用外部包含的左上角作为原点 (0,0) 计算出这些元素的宽度和位置(margin-left，margin-top)，并使用 PHP 来创建合成图像正确裁剪。

这工作正常，除了他们现在希望能够旋转我可以使用 CSS 执行的文本(添加 transform: rotate(-90deg); 到跨度)，但是，我正在努力如何获得插入点旋转的文本

我知道这一切都可以使用 HTML 5 canvas 元素完成，但它需要与 IE8 配合使用

非常感谢任何帮助

Answer 1

尝试在您的 CSS 中使用以下代码作为文本

/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

它应该将文本旋转 90 度，并仍然保持文本的中心点在中心。