CSS проблема box-shadow с вертикально отрисованным текстом - PullRequest
1 голос
/ 11 января 2011

У меня есть текст, повернутый на 270 градусов, к которому я хотел бы применить CSS-свойство -moz-box-shadow/box-shadow/-webkit-box-shadow. К сожалению, все браузеры отображают тень блока, как если бы элемент текстового блока не был повернут (то есть позиция тени находится на 90 градусов от того места, где она должна быть, как при стандартном рендеринге слева направо)

Есть ли способ преодолеть эту проблему?

Ответы [ 2 ]

1 голос
/ 11 января 2011

Это работает для меня. Можете ли вы опубликовать свой код, чтобы мы могли видеть, что вы делаете? (Например, одна вещь, которую вы могли бы сделать, это настроить преобразование - повернуть элемент span, но установить тень блока на элемент контейнера.)

Вот код работающего 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>
0 голосов
/ 11 января 2011

Вы, вероятно, применяете тень блока к родительскому контейнеру (который не вращается), вы должны применить его к контейнеру с преобразованием, т.е.

http://jsfiddle.net/QK9wG/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...