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


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

Translate, scale в CSS3

Здравствуйте, дорогие мои читатели. Помните я как-то писал статью про куб на CSS3. Сегодня мы тоже будем строить куб, но в отличие от предыдущего я не буду использовать поворот граней с помощью свойства skew. Вместо этого я использую две функции трансформации translate и rotate. А потом мы попробуем увеличить наш куб при наведении с помощью функции масштабирования — scale.

функции scale, translateДавайте для начала выясним что же за функция такая translate? Эта функция трансформирования объекта позволяет его передвигать относительно 3-х осей координат. Имеет следующий синтаксис:

transform:translateX(x); /* Перевод элемента вдоль оси X */
transform:translateY(y); /* Перевод элемента вдоль оси Y */
transform:translateZ(z); /* Перевод элемента вдоль оси Z */
transform:translate(x,y); /* Перевод элемента вдоль вектора XY */
transform:translate3d(x,y,z); /* Перевод элемента вдоль вектора XYZ */ 

Единственное нужно отметить, что для перемещения по оси Y используют обратные координаты. То есть для того, чтобы нам двигаться вверх по оси Y мы должны задавать отрицательные значения.


Ну что ж давайте создадим наш новый куб.

Код HTML:

<section class="container">
 <div class="cube">
 <span class="side front">1</span>
 <span class="side back">2</span>
 <span class="side top">3</span>
 <span class="side bottom">4</span>
 <span class="side left">5</span>
 <span class="side right">6</span> 
 </div>
</section>

Код CSS:

.container {       
  perspective: 700px;
  perspective-origin: 10% 60%;
       }
 .cube{
  position: relative;
  margin: 150px auto;
  width: 150px;
  height: 150px;
  transform-style: preserve-3d;
  transition: all 1.3s ease;
 }
.side{
 display: block;
  position: absolute;
  background:#cccccc;
  opacity:0.6;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  color: #000;
  font-size: 20px;
  text-align: center;
  line-height: 150px;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.5);
}
.front {
  transform: translateZ(75px);
}
.back {
  transform: translateZ(-75px) rotateY(-180deg);
}
.left {
  transform: translateX(-75px) rotateY(-90deg);
}
.right {
  transform: translateX(75px) rotateY(90deg);
}
.top {
  transform: translateY(-75px) rotateX(90deg);
}
.bottom {
  transform: translateY(75px) rotateX(-90deg);
}

Здесь я использовал два новых свойства:perspective-origin и transform-style: preserve-3d. Первое определяет, где будет располагаться наш объект на осях X, Y, а второе определяет, как будут располагаться дочерние элементы.

Без свойства perspective-origin мы увидим неясную картинку куба. По умолчанию perspective-origin:50% 50%. Из кода выше можно догадаться, что мы строим куб размером 150*150*150. Со сторонами:

Общие свойства сторон мы задаём при помощи класса side. В результате должно получиться следующее: куб 3D. Давайте попробуем увеличить наш куб при наведении при помощи функции scale3d:

.cube:hover{
   transform:scale3d(1.5,1.5,1.5); 
}

По аналогии с translate общий синтаксис для этой функции будет следующим:

transform:scaleX(x); /* Увеличивает элемент относительно оси X */
transform:scaleY(y); /* Увеличивает элемент относительно оси Y */
transform:scaleZ(z); /* Увеличивает элемент относительно оси Z */
transform:scale(x,y); /* Увеличивает элемент относительно оси X и Y */
transform:scale3d(x,y,z) /* Увеличивает элемент относительно оси X,Y и Z */

И подводя итог в конце концов мы получим: масштабируемый куб.



наверх