CSS - 图像顶部的文本旋转

Question

我有一个客户希望最终用户上传一张图片，在这种情况下，该图片叠加在日记下方，如下图所示。

最终用户可以缩放照片并向上/向下和向左/向右移动，他们还可以添加文本（在 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 画布元素完成，但它需要与 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 度，并且仍然保持文本的中心点在中心。