| Kosten | Понедельник, 04 Марта 2019, 18:56 | Сообщение 1 |
| В статье узнаете, как можно не сложно создать вращающий куб, где все стороны отлично просматриваются и имеют свою палитру цвета. Все это сделано на чистом стиле, которое отлично редактируется. Здесь изначально покрашены стороны объект в соответствии с цветовой схемой кубика рубрика и установил небольшую непрозрачность, где идет шесть сторон куба расположены со свойством 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, но они не поддерживают настройку, необходимую для правильных трехмерных макетов.
Демонстрация
| | Страна: (RU) |
| |
