Можно ли повернуть элемент, но не его содержимое с помощью css3?

У меня есть следующий элемент

<a href="#" class="some_class">Test Text Here</a>

и этот элемент имеет светло-голубой фон и некоторые дополнения. Сегодня я столкнулся с одной небольшой проблемой: я знаю, что мы можем вращать элемент, однако его содержимое также вращается. То, что я пытался добиться, выглядит следующим образом:

enter image description here

Таким образом, сам элемент слегка вращается, однако его содержимое остается на месте. Возможно ли это с помощью CSS3? Я попытался сыграть с несколькими вложенными элементами, однако, повернув их родительский элемент, все дочерние элементы также повернулись. Также это можно сделать с помощью одного элемента, например, указанного выше?

Ответы

Ответ 1

Конечно, если вы обертываете текст в промежутке, затем установите для диапазона position: absolute и transform равную сумму в обратном направлении по умолчанию.

Я бы предложил против супер-наложения текста по вашей ссылке в предложенном выше случае, так как вы хотите, чтобы текст был INSIDE для привязанного тега для целей SEO.

Итак... Я повернул <a> на 10 градусов по часовой стрелке и повернул <span> 10 градусов против часовой стрелки.

***** ALTERNATIVELY ** - Вы также можете установить диапазон отображения: block; и падение абсолютного позиционирования. Это зависит от вашего варианта использования. Абсолютное позиционирование в этом случае позволило бы вам перемещать текст с меньшим контролем.

http://jsfiddle.net/B95xa/

a {
    color: #fff;
    display: block;
    width: 100px;
    height: 30px;
    background: blue;
    border-radius: 5px;
    -moz-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -webkit-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -o-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -ms-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}

span {
    position: absolute;
    -moz-transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -webkit-transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -o-transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -ms-transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}

Ответ 2

У вас есть 2 варианта, о которых я знаю:

  • Сделайте их отдельными элементами и просто поверните фоновое изображение /div. Этот метод будет работать, если вам нужно анимировать поворот.
  • Если вы используете изображение, сохраните фоновое изображение как предварительно искаженное.