• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Анимация вращения куба 3D на чистом CSS (3D преобразования и анимация CSS и вращающийся куб)
Анимация вращения куба 3D на чистом CSS
Kosten
Понедельник, 04 Марта 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
В статье узнаете, как можно не сложно создать вращающий куб, где все стороны отлично просматриваются и имеют свою палитру цвета. Все это сделано на чистом стиле, которое отлично редактируется. Здесь изначально покрашены стороны объект в соответствии с цветовой схемой кубика рубрика и установил небольшую непрозрачность, где идет шесть сторон куба расположены со свойством transform. Также с мануале вы узнаете рисовать куб с переходами CSS3. Мы сможем вращать куб с помощью анимации ключевых кадров и JavaScript.

По мере взросления CSS3, а разработчики тратят больше времени на изучение и игру с этой технологией, мы видим творческие работы, использующие CSS transform, transform-origin, transform-style, translateZ, rotateX, rotateY, rotateZ, радиальный градиент, линейный градиент, ключевые кадры, переход и свойства прозрачности.



Создание анимированного 3D куба с помощью CSS3 Transform

HTML

Код
<div id="compatiblelugins">
    <div id="kedeskugop">
  <div id="skugopnical1"></div>
  <div id="skugopnical2"></div>
  <div id="skugopnical3"></div>
  <div id="skugopnical4"></div>
  <div id="skugopnical5"></div>
  <div id="skugopnical6"></div>
    </div>
</div>


CSS

Код
#compatiblelugins {
    width: 248px;
    height: 209px;
    margin: 18px auto;
}
#kedeskugop {
    width: 115px;
    height: 115px;
    top: 50px;
    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -moz-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    margin: auto;
    position: relative;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-animation: cubeRotation 5s infinite;
    animation: cubeRotation 5s infinite;
}

@-webkit-keyframes cubeRotation {
    0%   {    -webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);    }
    50%   {    -webkit-transform: rotateX(-22deg) rotateY(-128deg) rotateZ(0deg);    }
    100%   {    -webkit-transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg);    }
}
/* Standard syntax */
@keyframes cubeRotation {
    0%   {    transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);    }
    50%   {    transform: rotateX(-22deg) rotateY(-238deg) rotateZ(0deg);    }
    100%   {    transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg);    }
}
#kedeskugop > div {
    position: absolute;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    width: 112px;
    height: 112px;
    float: left;
    overflow: hidden;
    opacity: 0.85;
}
#skugopnical1 {
    transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #FFF;
}
#skugopnical2 {
    transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #ffaf1c;
}
#skugopnical3 {
    transform: translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: translateX(0px) translateY(0px) translateZ(56px);
    background-color: #58d568;
}
#skugopnical4 {
    transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #ed3030;
}
#skugopnical5 {
    transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #1c5ffe;
}
#skugopnical6 {
    transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #f2f215;
}


Вращение куба с помощью JavaScript, это не единственный способ анимации куба, где можем использовать ключевые кадры CSS, чтобы установить циклическую анимацию. В этом случае нам нужно добавить следующие корректировки в нашу таблицу стилей, где плавно изменит значение rotateY.

Демонстрация



Анимированный куб с использованием ключевых кадров CSS

Ниже вы можете посмотреть тестовую версию скрипта на странице, где нажмите кнопки поворота, чтобы увидеть анимированные повороты.

Для начало подключим библиотеку:

Код
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript">


HTML код

Все, что вам нужно, это обертка и элемент div для каждой стороны, где добавлена ссылка для управления вращением куба.

Код
<div id="mprovesagewebs">
    <div id="D3Cube" style="transform: rotateX(-22deg) rotateY(-38deg) rotateZ(-180deg) translateX(0px) translateY(0px) translateZ(0px);">
  <div id="vesagecomen1"></div>
  <div id="vesagecomen2"></div>
  <div id="vesagecomen3"></div>
  <div id="vesagecomen4"></div>
  <div id="vesagecomen5"></div>
  <div id="vesagecomen6"></div>
    </div>
</div>
<p style="text-align: center;">
    <a onclick="turnLeft()">налево</a>    <a onclick="turnRight()">на право</a> <br>
    <a onclick="flipCube()">кувырок</a>
</p>


Стили CSS

Код
a, a:visited {
    color: #0101d0;
    font-weight: bold;
    cursor: pointer;
    font-size: 20px;
    font-family: arial;
    line-height: 20px;
    display: inline-block;
    padding: 10px;
}
a:hover {
    color: #000;
}

#mprovesagewebs {
    width: 250px;
    height: 213px;
    margin: 20px auto;
    background-color: #EEE;
}
#D3Cube {
    width: 112px;
    height: 112px;
    top: 50px;
    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -moz-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    margin: auto;
    position: relative;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
#D3Cube > div {
    position: absolute;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    width: 112px;
    height: 112px;
    float: left;
    overflow: hidden;
    opacity: 0.85;
}
#vesagecomen1 {
    transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #FFF;
}
#vesagecomen2 {
    transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #ffaf1c;
}
#vesagecomen3 {
    transform: translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: translateX(0px) translateY(0px) translateZ(56px);
    background-color: #58d568;
}
#vesagecomen4 {
    transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #ed3030;
}
#vesagecomen5 {
    transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #1c5ffe;
}
#vesagecomen6 {
    transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #f2f215;
}

JS

var cubex = -22,    // initial rotation
cubey = -38,
cubez = 0;
function rotate(variableName, degrees) {
    window[variableName] = window[variableName] + degrees;
    rotCube(cubex, cubey, cubez);
}
function rotCube(degx, degy, degz){
    segs = "rotateX("+degx+"deg) rotateY("+degy+"deg) rotateZ("+degz+"deg) translateX(0) translateY(0) translateZ(0)";
    $('#D3Cube').css({"transform":segs});
}
function turnRight() {
    rotate("cubey", 90);
}
function turnLeft() {
    rotate("cubey", -90);
}
function flipCube() {
    rotate("cubez", -180);
}


Эта версия создана для вращение куба с помощью JavaScript, где при клике набивается оборот.

Эти эффекты будут работать в браузерах WebKit (Safari / iPhone / iPad и Chrome) и Mozilla (Firefox). Некоторые более простые эффекты будут работать в Internet Explorer 10, но они не поддерживают настройку, необходимую для правильных трехмерных макетов.

Демонстрация
Прикрепления: 1526294.png (6.9 Kb) · 6891712.png (11.6 Kb) · 1658664.zip (1.9 Kb) · 5316888.zip (2.5 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Анимация вращения куба 3D на чистом CSS (3D преобразования и анимация CSS и вращающийся куб)
  • Страница 1 из 1
  • 1
Поиск: