Question

我有一些旋转270度的文字，我想将-moz-box-shadow/box-shadow/-webkit-box-shadow CSS属性应用到。不幸的是，浏览器都渲染了盒子阴影，好像文本块元素没有被旋转一样（即阴影位置与它应该的位置相差90度，就像在标准的从左到右渲染中一样）

有没有办法克服这个问题？

Answer 1

这对我有用。您可以发布您的代码，以便我们可以看到您在做什么吗？（例如，您可以做的一件事是设置变换 - 在span元素上旋转，但在容器div上设置box-shadow。）

以下是一些有效的webkit代码：

#RRottatte{ -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(270deg);
width: 100px;
height: 100px;
top: 300px;
left: 200px;
-webkit-box-shadow: 6px 6px 0px red;
 }
</style>

</head>
<body>
<div id="RRottatte">My Rotated Text</div></body>
</html>

Answer 2

您可能正在将框阴影应用于父容器（未旋转），您必须将其应用于具有转换的容器，即：

http://jsfiddle.net/QK9wG/

CSS问题框阴影与垂直渲染的文本

2 个答案: