代码之家 › 专栏 › 技术社区 › djcamo

CSS-在图像顶部旋转文本

image-rotation css html

djcamo · 技术社区 · 10 年前

我有一个客户,他希望最终用户上传一张图片,在这个例子中,这张图片是按照下面的图片在日记下面加上的。

最终用户可以缩放照片并将其上下左右移动,还可以添加文本(在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>

然后,我使用外部contain的左上角作为原点(0,0)计算出这些项目的宽度和位置(左边距,上边距),并使用PHP以正确的裁剪裁剪合成图像。

这可以正常工作,除非他们现在希望能够旋转文本,我可以使用CSS(添加转换:旋转(-90度);然而,我正在努力如何获得旋转文本的插入点

我知道这一切都可以使用HTML5画布元素完成,但它需要与IE8一起工作

非常感谢任何帮助

rotated text

1 回复 | 直到 10 年前

Kristofer Aron Sverrisson 10 年前

尝试在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度,并且仍然保持文本的中心点在中心。

推荐文章

mbghr · 如何在matlab中围绕物体中心旋转图像?

6 年前

KiShOrE · 如何在GridView中旋转图像

6 年前

Artur · 如何在OpenCV中分组字母,知道它们的旋转方向?

6 年前

LePioo · 画布变换旋转瑕疵

7 年前

Test iOS · ImageView旋转在collectionView单元格内工作不正常

7 年前

Neeraj Kumar · 旋转Openseadragon图像时织物画布改变位置

7 年前

dark.zara · 以随机持续时间旋转图像

7 年前

Leyton Taylor · 轻扫旋转图像

9 年前

djcamo · CSS-在图像顶部旋转文本

10 年前

Bradley Bossard · Actionscript中矩阵缩放/旋转的奇怪稳定性问题

11 年前