В этом уроке мы рассмотрим самую удивительную анимацию 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, мы рекомендуем вам прочитать и эти.
Демонстрация
