| Auto с аукционов США|COPART|IAAI|MANHEIM |

knopka.kh.uaCMSТекст на сайте под произвольным углом-CSS3

Текст на сайте под произвольным углом-CSS3

Создано A. Daniley .Разместил в категорию CMS, Web-дизайн, WordPress

Повернуть текст на сайте под произвольным углом? Повернуть изображение под любым углом (вращение)? Думаете трудно? – элементарно! Современные браузеры поддерживают современные технологии CSS3  и позволяют делать эффект вращения текста или картинки – средствами CSS3, используя при этом в каждом браузере свою технологию;
Internet Explorer  —Matrix Filter Safari и Chrome  -webkit-transform Firefox -moz-transform Opera  -o-transform
Вращение текста и изображения, интересно использовать, например, в интернет магазинах, “повесив” ценник товара под произвольным углом на шнурочке .

Самый простой пример использования что бы продемонстрировать вращение теста.

1. Создаем класс для SPAN: 
span.smile

{

-webkit-transform: rotate(-30deg); /*Chrome, Safari 3.1 и новее*/

-ms-transform: rotate(-30deg);     /*IE 9*/

-moz-transform: rotate(-30deg);    /*Firefox от 3.5 до 15*/

-o-transform: rotate(-30deg);      /*Opera от 10.50 до 12.00*/

transform: rotate(-30deg);         /*Firefox 16 и новее, Opera 12.50 и новее, IE 10 и новее */

display: inline-block;

vertical-align: text-top;

padding-left: 8px;

text-indent: 0px;

}
2. создаем на веб-странице: <span class=»smile»>: )</span> Если ваш браузер поддерживает поворот текста то вы увидите три смайлика: один без эффекта css3 вращения, а второй с эффектом вращения текста css3 под углом 30 градусов, третий под углом 45 градусов.
: )   : ) : )
Теперь мы знаем что  -ХХdeg это поворот текста на ХХ%.

Попробуем  повернуть блок DIV на 30 градусов в нужном нам направлении:

1. Создаем класс для povorot30: 
.povorot30

{

-webkit-transform: rotate(30deg); /*Chrome, Safari 3.1 и новее*/

-ms-transform: rotate(30deg);     /*IE 9*/

-moz-transform: rotate(30deg);    /*Firefox от 3.5 до 15*/

-o-transform: rotate(30deg);      /*Opera от 10.50 до 12.00*/

transform: rotate(30deg);         /*Firefox 16 и новее, Opera 12.50 и новее, IE 10 и новее */

}
2. создаем на веб-странице: 
<div class="povorot30"> Поворот текста DIV</div>
 
Поворот текста DIV povorot +30

Чтобы повернуть текст, в противоположную сторону нужно подставить отрицательные значения в CSS:

.povorot-30 {

-webkit-transform: rotate(-30deg); /*Chrome, Safari 3.1 и новее*/

-ms-transform: rotate(-30deg);     /*IE 9*/

-moz-transform: rotate(-30deg);    /*Firefox от 3.5 до 15*/

-o-transform: rotate(-30deg);      /*Opera от 10.50 до 12.00*/

transform: rotate(-30deg);         /*Firefox 16 и новее, Opera 12.50 и новее, IE 10 и новее */

}
2. Код web страницы не меняется, за исключением названия класса. 
<div class="povorot-30"> Поворот текста DIV</div>
Поворот текста DIV povorot-30

Рассмотрим как сделать динамическое изменение при помощи CSS  (анимацию простенькую).

1. Создаем два класса.

Чтобы повернуть горизонтально:

.povorotX

{ /* можно оставить как есть */ }
.povorotX:hover

{

-webkit-transform: scaleX(-1);  /*Chrome, Safari 3.1 и новее*/

-moz-transform: scaleX(-1);  /*Firefox от 3.5 до 15*/

-ms-transform: scale(-1,0);  /*IE 9*/

-o-transform: scaleX(-1);  /*Opera от 10.50 до 12.00*/

transform: scaleX(-1);  /*Firefox 16 и новее, Opera 12.50 и новее, IE 10 и новее */

}

Чтобы повернуть вертикально:

.povorotY

{ /*можно оставить как есть */ }
.povorotY:hover

{

-webkit-transform: scaleY(-1);  /*Chrome, Safari 3.1 и новее*/

-moz-transform: scaleY(-1);  /*Firefox от 3.5 до 15*/

-ms-transform: scale(-0,-1);  /*IE 9*/

-o-transform: scaleY(-1);  /*Opera от 10.50 до 12.00*/

transform: scaleY(-1);  /*Firefox 16 и новее, Opera 12.50 и новее, IE 10 и новее */

}

2. создаем на веб-странице код для изображения которое будем поворачивать:

<img class="povorotX" src="https://twimg0-a.akamaihd.net/profile_images/2175431150/css3logo.png" />
8542576-touchscreen-smartphone-with-earth-globe---smartphone-design-and-all-elements-and-used-photos-are-my-[1]

3. создаем на веб-странице код для текста который будем вращать:

<div class="povorotX">при наведении мышки сюда, текст отражается</div>
при наведении мышки сюда, текст отражается
4. создаем на веб-странице код для изображения и текста которые будем вращать для povorotY, аналогично пунктам 2 и 3: 
<img class="povorotY" src="http://knopka.kh.ua/wp-content/uploads/2012/12/185px-Android_robot.svg1_-150x150.png" />
<div class="povorotY">при наведении мышки сюда, текст переварачивается</div>
при наведении мышки сюда, текст переварачивается

Добавить комментарий