Вопросы Теги

Как я могу нарисовать вертикальный текст с перекрестным браузером CSS?

Мне пришло в голову, что вы, возможно, на самом деле спрашиваете, как реализовать оператор + для словарей, похоже, что работает следующее: 

>>> class Dict(dict):
...     def __add__(self, other):
...         copy = self.copy()
...         copy.update(other)
...         return copy
...     def __radd__(self, other):
...         copy = other.copy()
...         copy.update(self)
...         return copy
... 
>>> default_data = Dict({'item1': 1, 'item2': 2})
>>> default_data + {'item3': 3}
{'item2': 2, 'item3': 3, 'item1': 1}
>>> {'test1': 1} + Dict(test2=2)
{'test1': 1, 'test2': 2}

Обратите внимание, что это больше затрат, чем при использовании dict[key] = value или dict.update(), поэтому я бы рекомендовал не использовать это решение, если вы все равно не собираетесь создавать новый словарь.

242
задан TylerH 23 April 2015 в 18:58
поделиться

3 ответа

Обновил этот ответ последней информацией (из CSS Tricks ). Престижность Мэтту и Дугласу за указание на реализацию фильтра. 

.rotate {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);

  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  /* Should be unset in IE9+ I think. */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Старый ответ:

Для FF 3.5 или Safari / Webkit 3.1, проверьте: -moz-transform (и -webkit-transform) . IE имеет матричный фильтр (v5.5 +), но я не уверен, как его использовать. В Opera пока нет возможностей преобразования. 

.rot-neg-90 {
  /* rotate -90 deg, not sure if a negative number is supported so I used 270 */
  -moz-transform: rotate(270deg);
  -moz-transform-origin: 50% 50%;
  -webkit-transform: rotate(270deg);
  -webkit-transform-origin: 50% 50%;
  /* IE support too convoluted for the time I've got on my hands... */
}
213
ответ дан 23 November 2019 в 03:14
поделиться

Я адаптировал это из http://snook.ca/archives/html_and_css/css-text-rotation : 

<style>
    .Rotate-90
    {
        display: block;
        position: absolute;
        right: -5px;
        top: 15px;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
    }
</style>
<!--[if IE]>
    <style>
        .Rotate-90 {
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
            right:-15px; top:5px;
        }
    </style>
    <![endif]-->
6
ответ дан 23 November 2019 в 03:14
поделиться

Я использую следующий код для написания вертикального текста на странице. Firefox 3.5+, webkit, opera 10.5+ и IE 

.rot-neg-90 {
    -moz-transform:rotate(-270deg); 
    -moz-transform-origin: bottom left;
    -webkit-transform: rotate(-270deg);
    -webkit-transform-origin: bottom left;
    -o-transform: rotate(-270deg);
    -o-transform-origin:  bottom left;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
73
ответ дан 23 November 2019 в 03:14
поделиться