CSS 3 3D-переходы - httpdoc.ru

CSS3 переход

Переходы CSS3 - это эффекты, которые позволяют плавно изменять значения свойства от одного значения к другому в течение заданной продолжительности. Эти эффекты постепенно изменяют свойство элемента от одного стиля к другому, без использования Flash или JavaScript.

Для создания перехода необходимо указать две вещи:

  • CSS свойство, к которому вы хотите добавить эффект.
  • Продолжительность времени.
Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS 3D Transition </title> 
  <meta charset="UTF-8"> 
<style>
  button {
    color: #fff;
    border: none;
    padding: 10px 20px;
    font: bold 18px sans-serif;
    background: #da6e18bd;
    -webkit-transition: background 2s; /* For Safari 3.0 to 6.0 */
    transition: background 2s; /* For modern browsers */
    }
  button:hover {
    background: seagreen;
    }
</style>
</head>
<body>
  <button type="button">Hover on me</button>
</body>
</html>

Выход

CSS 3D Transition

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

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS 3D Transition </title> 
  <meta charset="UTF-8">
<style>
div {
    width: 100px;
    height: 100px;
    background: #758bbd;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}

div:hover {
    width: 300px;
}
</style>
</head>
<body>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>
</html>

Выход

CSS 3D Transition

Наведите указатель мыши на элемент div выше, чтобы увидеть эффект перехода.


Переход + Трансформация

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS 3D Transition + Transform </title> 
  <meta charset="UTF-8">
<style>
div {
    width: 100px;
    height: 100px;
    background: #555d18de;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    width: 300px;
    height: 300px;
    -webkit-transform: rotate(180deg); /* Safari */
    transform: rotate(180deg);
}
</style>
</head>
<body>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>

Выход

CSS 3D Transition + Transform

Имущество Описание
переход Это сокращенное свойство, позволяющее установить все четыре отдельных свойства перехода ниже в одном объявлении.
задержка перехода Он определяет период времени, по истечении которого начнется переход.
Продолжительность перехода Он определяет период времени, в течение которого анимация перехода должна быть завершена.
переходная собственность В нем указывается имя свойства CSS, к которому следует применить эффект перехода.

Поддержка браузера

Имущество
Microsoft Edge browser.png Край
Chrome browser.png Хром
Firefox browser.png Fire Fox
Opera browser.png Опера
safari browser.png Сафари
Transition
да
да
да
да
да