Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Css3 » Rotate-perspective-v-css3

Rotate. Трансформации в CSS3

Сегодня я решил начать серию уроков про трансформации в CSS3. В этом уроке мы познакомимся со свойством rotate. Но для начала нужно узнать как вызвать функцию трансформации. Вызывается она очень просто с помощью свойства transform, причём можно задавать сразу несколько значений трансформации через запятую.

perspective

Что же делает значение rotate и как его использовать? Ничего сверхъестественного здесь нет, оно позволяет нам переворачивать интересующий нас объект(слово, блок и т.п.). Имеет следующий синтаксис:

transform:rotateX(angle); /* Переворачиваем объект по оси X на заданный угол */
           transform:rotateY(angle); /* Переворачиваем объект по оси Y на заданный угол */
           transform:rotateZ(angle); /* Переворачиваем объект по оси Z на заданный угол */
           transform:rotate3d(rx,ry,rz,angle) /* Переворачиваем объект по осям X, Y, Z на заданные углы */  

С первыми тремя способами все вроде бы понятно, а вот над последним стоит призадуматься. На самом деле тут всё просто, здесь rx,ry,rz — это координаты вектора относительно которого мы хотим переворачивать объект.

Давайте рассмотрим небольшой пример:

Код html:

<div class="container">
      <div class="perevorot">Этот блок мы будем переворачивать</div>
</div

Код css:


.container {
      width: 400px;
      height: 300px;
      border: 1px solid #CCC;
      margin: 0 auto 60px;
      position: relative;      
    }
.perevorot{
    width:400px;
    height:300px;
    color:#ffffff;
    text-align:center;    
    background:#6da898;
    transition: all 1.3s ease;
}
.perevorot:hover{
    -webkit-transform: rotateZ( 50deg );
    -moz-transform: rotateZ( 50deg );
    -o-transform: rotateZ( 50deg );
    transform: rotateZ( 50deg );   
}

Результат можно посмотреть здесь. В данном примере я поворачиваю блок при наведении на 50 градусов вокруг оси Z. Давайте немного усложним данный пример и используем свойство rotate3d:

.perevorot:hover{
    -webkit-transform: rotate3d(1,0,1, 50deg );
    -moz-transform: rotate3d(1,0,1, 50deg );
    -o-transform: rotate3d(1,0,1, 50deg );
    transform: rotate3d(1,0,1, 50deg );   
}

В результате получим следующее: rotate3d. Согласитесь не очень хорошо выглядит. Можно улучшить результат использовав ещё одно новое свойство CSS3 — perspective.

Свойство perspective в CSS3

Свойство perspective меняет обзор зрения объекта. Это даёт нам перспективу видеть иллюзию глубины объекта. Имеет следующий синтаксис:
transform: perspective();

Давайте добавим к нашему примеру это свойство:

.container {
      width: 400px;
      height: 300px;
      border: 1px solid #CCC;
      margin: 0 auto 60px;
      position: relative; 
     -webkit-perspective: 600px;
         -moz-perspective: 600px;
           -o-perspective: 600px;
              perspective: 600px;
    }

Результат вы можете увидеть здесь: перспектива. Попробуйте поэкспериментировать с данным свойством и со свойством rotate. Возможно вы даже захотите где-нибудь применить данные свойства.



наверх