Уроки по CSS/CSS3. Часть 18. Трехмерный куб на CSS3

Показать описание

В этом видео я покажу как сделать трехмерный куб при помощи CSS transform

Рекомендации по теме

Комментарии

100500 лайков за Чувство юмора и отличные примеры!)

SergeyMerkoev

Этот урок ориентирован на будущее (и многие еще будут). Норм. поддержки трансформаций всеми браузерами мы всё еще ждем. Я писал специально для ff, потому что у меня нет никаких сомнений в том что то же самое можно написать и для вебкита. В разных браузерах разные мелочи реализованы по разному, это так, да. Поэтому просто изменить префиксы оказалось недосаточно.

Для side1 допиши translateZ(0px), в cube убери transform-origin для вебкита вообще, и в wrapper допиши margin:150px auto;width:300px;

artsorax

Супер! Класс!!! Sorax, ты просто крутой чувак! Спасибо за туторилы!

BauMaki

Отлично!
В развитие 3d-шной темы: то, что показано, создает куб и позволяет трансформировать его в координатах объекта (с точкой начала координат в центре куба). Если дополнительно нужно, например, повращать его вокруг некоторой точки сцены, то задаем еще одну обертку (div) вокруг cube и прописываем в его css только transform-origin: (<координаты_точки>); transform-style: preserve-3d; transform: <трансформации>
Т.е. в итоге можно сделать вращение планеты-куба вокруг своей оси (осей) и вокруг "солнца".

denisarius

Спасибо еще раз, в который раз пересматриваю. Отличная best-практика

НиколайВладимирович-кф

Как же приятно смотреть твои уроки Артем

dtwizzx

в последних видео ты раскрылся как человек) подход с чувством юмора, спасибо, привет из 2019, почти закончил изучение по твоим урокам)

Moter

Боже) на 1:21 у меня была истерика) Лайк безусловно)

ImIvI

Sorax, а чем ты реализовал отдельное окно для ввода сокращений кода, при этом полный код одновременно отображается в другом окне ???

МаксПокровский-кп

Ссылка в описании неактивна, поэтому вот код, если кому лень с экрана переписывать:

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Cube</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="wrapper">
<div id="cube">
<div class="side" id="side1">1</div>
<div class="side" id="side2">2</div>
<div class="side" id="side3">3</div>
<div class="side" id="side4">4</div>
<div class="side" id="side5">5</div>
<div class="side" id="side6">6</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

CSS:
#wrapper {
margin: 80px;
perspective: 900px;
}

#cube {
position: relative;
width: 300px;
height: 300px;
transform-origin: 50% 50% -150px;
transform-style: preserve-3d;
}

.side {
width: 300px;
height: 300px;
background: red;
position: absolute;
border: 2px solid #fff;
border-radius: 10px;
font-size: 5em;
color: #fff;
line-height: 300px;
text-align: center;
transform-origin: 50% 50% -150px;
}

#side2 {
transform: rotateY(90deg);
background: blue;
}

#side3 {
transform: rotateY(-90deg);
background: pink;
}

#side4 {
transform: rotateX(90deg);
background: yellow;
}

#side5 {
transform: rotateX(-90deg);
background: green;
}

#side6 {
transform: rotateY(180deg);
background: black;
}

JS:
$(function(){

$('#cube').css({
rotateY('+e.pageX+'deg)'
})
});
})

ХудожникНастоящий

отличный урок ! все доступно и понятно ... буду смотреть всю серию уроков. Вопрос может не по теме но все же, сколько уроков планируешь по CSS3 ?

liveindesignful

спасибо за урок, в Сhrome куб получился

BBARWARRIOR

Sorax, привет отличный урок, подскажи как можно вставить в каждую грань видео с ютуба или из другого источника. Спасибо

TheProfitmen

Жееесть. Я знал, что ксс сила, но что бы от так, в 5 минут..

david_shiko

а если я хочу вращать при нажатии кнопки мыши, не подскажешь че изменить

MrSirus

Привет, видео очень классное, а можешь подсказать через какую программу ты пишешь код и дать ссылку на твой сайт если он есть.

nikiman

Что-то я не врубаю. Каким образом можно запихнуть в центр куба картинку? У меня там анамальная херня получается :P

TheHappyLokiGames

body {
background: url(background.png);
font: 1em Tahoma, Arial;

}

#wrapper {
perspective: 900px;
margin: 80px;
}

#cube {
position: relative;
width: 300px;
height: 300px;
transform-origin: 50% 50% -150px;
transform-style: preserve-3d;
transform: rotate3d(1, 1, 1, 45deg);
}

.side {
width: 300px;
height: 300px;
background: rgba(0, 0, 0, .3);
background: radial-gradient(rgba(128, 175, 126, .8), rgba(13, 186, 7, .9));
position: absolute;
border: 10px solid #0cff02;
border-radius: 10px;
font-size: 5em;
color: #fff;
line-height: 300px;
text-align: center;
text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 0 6px rgba(0, 0, 0, .5);
transform-origin: 50% 50% -150px;
backface-visibility: hidden;

}

#side2 {
transform: rotateY(90deg);
}

#side3 {
transform: rotateY(-90deg);
}

#side4 {
transform: rotateX(90deg);
}

#side5 {
transform: rotateX(-90deg);
}

#side6 {
transform: rotateY(180deg);
}

DAIMON-tfxd

А как сделать, что-бы куб вращался только при зажатой кнопки мыши?

romanchernyshov

Сделайте урок по вёрстке на psd макете

zadable

Уроки по CSS/CSS3. Часть 18. Трехмерный куб на CSS3

Уроки по CSS/CSS3. Часть 18. Трехмерный куб на CSS3

Уроки по CSS CSS3 Часть 18 Трехмерный куб на CSS3

Уроки по CSS/CSS3. Часть 19. Анимации (animation)

CSS3. Базовый полный курс. Урок 18 (1) - Финальный проект

CSS CSS3 Урок 18 Трехмерный куб на CSS3

Красивый Preloader на CSS3. Часть 1

Линейный и Радиальный градиент на чистом CSS3 | Курс HTML & CSS | Занятие №18...

border-radius Как скруглить рамку. Закругленные углы Свойство радиус Обучение Курс CSS3 Уроки 14...

CSS3 #18 Плавные переходы (Transition)

Обтекание элементов, float, практикуем CSS3 | Курс HTML & CSS | Занятие №16...

Уроки по CSS/CSS3. Часть 20. @font-face

Уроки по CSS/CSS3. Часть 17. Трансформации (transform)

Уроки по CSS/CSS3. Часть 5. Текст

CSS3 для начинающих | #18 Селектор атрибута

Уроки по CSS/CSS3. Часть 21. Медиазапросы (media queries)

Уроки по CSS/CSS3. Часть 16. Градиенты

Уроки по CSS/CSS3. Часть 22. Верстка сайта

Уроки по CSS/CSS3. Часть 23. Многоколоночный текст

How to HTML&CSS. Урок 18. Как использовать классы и идентификаторы в СSS?...

Уроки по CSS3 | Создание меню на чистом CSS

Уроки по CSS/CSS3 HTML5 Форма поиска

Уроки по CSS/CSS3. Часть 2. Основные понятия

Уроки по CSS/CSS3. Часть 7. Рамки

Уроки по CSS/CSS3. Часть 13. Списки