• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать кнопку 3D с анимацией поворота (Создание красивой кнопки с красивой анимацией движения)
Создать кнопку 3D с анимацией поворота
Kosten
Дата: Вторник, 2020-06-09, 22:37 | Сообщение 1
Оффлайн
Администраторы
Сообщений:26655
Награды: 61


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



Здесь представлен удивительный аспект CSS3 для создания этого преобразующего 3D-эффекта, а также увидим, как его можно использовать с HTML-элементом другого типа. Ну, на изображении выше вы увидите эту кнопку с текстом «первое». Когда вы сделаете это руководство и наведите курсор мыши, это изменится на «второе» и превратится в 3d модель.

HTML

Код
<div class="scene">
        <div class="cube">
            <div class="cube-face front-face">ЦИТАТА</div>
            <div class="cube-face top-face">НАЧНЕМ</div>
        </div>
    </div>

CSS

Код
.scene {
  width: 150px;
  height: 50px;
  perspective: 900px;
  margin: 16.3em auto;
}
.cube {
  width: 150px;
  height: 50px;
  position: relative;
  transform: translateZ(-50px);
  transition: transform 0.5s;
  transform-style: preserve-3d;
}
.cube-face {
  position: absolute;
  width: 200px;
  height: 50px;
  text-align: center;
  font-size: 25px;
  padding-top: 20px;
  cursor: pointer;
  background: #041f1e;
  color: whitesmoke;
}
.front-face {
  transform: rotateY(0deg) translateZ(24px);
}
.top-face {
  transform: rotateX(90deg) translateZ(35px);
  background: #e01a4f;
  color: whitesmoke;
}
.cube:hover {
  transform: rotateX(-90deg);
}

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

CSS3 предоставляет нам отличную поддержку использования свойства transform. Это свойство позволяет нам преобразовывать элемент, вращать элемент, наклонять элемент и многое другое. Кроме того, вы также можете использовать @keyframes, чтобы оживить анимацию. @keyframes - это ключ к созданию анимации на протяжении многих лет. На этом сайте есть еще статья на @keyframes, мы рекомендуем вам прочитать и эти.

Демонстрация
Прикрепления: 5437293.png(25.9 Kb) · 3d-button.zip(3.2 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать кнопку 3D с анимацией поворота (Создание красивой кнопки с красивой анимацией движения)
  • Страница 1 из 1
  • 1
Поиск: