CSS 3D Трансформации. Пример с 3D кубом
HTML-код
- Опубликовано: 17 окт 2024
- Исходники + Demo: codepen.io/kami...
Список свойств:
perspective - создает 3D пространство для элементов
transform-origin - определяет относительно какой точки элемент будет трансформироваться
transform-style - сохраняет 3D пространство для дочерних элементов
backface-visibility - отвечает за отображение обратной стороны элемента
Список методов свойства transform:
perspective - создает 3D пространство для одного элемента
translateZ - двигает элемент по оси Z
translate3d - сдвигает элемент по всем осям
scaleZ - масштабирует ось Z
scale3d - масштабирует элемент по всем осям
rotateX - вращает элемент по оси X
rotateY - вращает элемент по оси Y
rotateZ - вращает элемент по оси Z
Facebook: / kamil.niftaliev
![BRASIL vs. PERÚ [4-0] | RESUMEN | ELIMINATORIAS SUDAMERICANAS | FECHA 10](http://i.ytimg.com/vi/tbyOJKXfQnI/mqdefault.jpg)
Все в 10 видео вместить не могут, а ты в 1 видео показал, да ещё и рассказал! Все понятно. Спосибо!!!!!!!!!!!
Я поражаюсь тому, какой объем работы ты проделал чтобы показать нам это видео, оно очень трудоемкое и главное очень понятное. Спасибо Большое!
I understood most of the things even though i dont understand single word of russian... That shows how well u have explained through graphic content.. Its mind blowing.. Respect to u dudefor putting so much effort in making ur tutorials and graphics to look effortless and convey things effortlessly... Subbed just seeing one video 👍🏼
Я думал я старый стал, сарказмный на ютубе все видео минусую. Но тут прям рука из под одеяла сама лезет лайк поставить.
Спасибо за классное видео. Особенно понравилось как написание CSS кода с превью результата сделал. Побольше-бы таких понятных классных видосов.
Ну, если ещё рука под одеялом, значит, не такой уж и старый! 😁
@@andreyka7559 она там греется, а не то что ты подумал ))))
@@eugenex8892 Так и я думаю, что нагревается от движения. 😁
@@andreyka7559 ну уж не надо же по себе ровнять... Если у тебя от движения греется, то я рад за тебя...пущай у тебя там греется от движения...
занимаюсь бекенд-разработкой зашел сюда случайно и ... вах-вах круто! лайк!!!
Просто невероятно! Как у тебя получилось так качественно, информативно и красиво все сделать... Аплодирую стоя! 10 минут на одном дыхании!!!
Редко пишу комментарии, но это было круто. Все четко и наглядно рассказано. Спасибо!
Просто супер, большущее спасибо! Сильно помогло с реальной рабочей задачей
Очень хорошо обьясняешь, просто все по делу без воды, мне бы таких преподов в универ, я бы со 2 курса устроился по профессии. Спасибо большое таким людям как вы, кто помогает в обучении будущих разработчиков)
Прекрасный урок, кого не смотрю они ленятся объяснять или не объясняют вообще, но ты просто лучший так держать спасибо тебе за урок!
Одно из самых крутых объяснений css свойств и вывода анимашки с ними, спасибо большое за видео, автор ты красавчик =).
Как-то обидно, что так мало людей это увидило и увидит... Столько работы... Спасибо за урок!
Красавчик!!! Коротко, чётко, ясно!
Жесть, все б так подходили к созданию контента.
Очень крутое объяснение
Бодрит видос как чашка кофе
Шикарный видос, благодарю
Очень шикарный урок. Спасибо за труды!
Шикарный видео ряд!
Спасибо, коротко и без воды!
ничего себе какая подача)))
прям топ
спасибо!!!!!!!
Автор красавчик. Не поленился сделать в видео редакторе анимацию, наглядно всё показать и объяснить. Качество подачи материала шикарное. Не то, что эти ленивые жопы, которые в пейнте рисуют ) Спасибо.
Очень хорошее видео. Спасибо большое
Спасибо вам за такие видео
I don't speak Russian but I understood your tutorial especially the graphics you used helped me so much, why you do not try to create English version from your tutorials, or at least using keep graphics visual graphics in next lessons
this is russia )))
@@АндрейГоляновский-х4й That's exactly what he said...
Did you get why he didn't want to explain how rotate3D() works?:D
@@1001-w5q He told that people usually never use it, cause it works not stable and hard for understand...
Классно объясняешь. Наглядно. Так держать!
Очень понятно объяснил. Как уж тут лайк не поставить
Чётко, ясно, внятно, понятно, подписка, лайк!
No one can teach me like u!You are such a SUPER TEACHER that left an impression on me!)))
are you from UZB
Всё максимально понятно объяснил. По больше бы таких
Очень четко,ты класно объясняешь!
Вот это было хорошо. Быстро, доходчиво и всё
Качественный видос спасибо! 10 из 10
класс нет слов братан
Нихуя себе чувак, вот это ты разложил все помполочкам, как же охуееено все понимаешь когда видишь !!! Спасибо за работу кэп
Это годно и достойно большего количества просмотров. Занимайся этим, получается на уровне
Большое спасибо) Все понятно и доступно)) +++
По началу не работал js
Потом я перепроверил и понял что забыл прописать
Sagol,molodec.Profesionalno
Очень-очень круто!💪👍👍👍
Greeting from Buenos Aires. What a useful css video. Keep up the good work dude
однозначно лайк! качественный урок!
зачётно и музончик что надо в видео у тебя! круто! спасибо
Потрясно!! Спасибо!
Спасибо за урок и за ссылку на кодепен, без нее бы не понял, почему у меня не работает))
Почему Вы не указали расстояние по оси Z = -150px для отдаления заднего блока (back)?
Заранее спасибо за ответ!
awesome, shikarno
Спасибо друг. Реально помог.
легенда
Очень круто и понятно!
Спасибо за информативность, брат
Wow, как наглядно
Просто замечательно
Спасибо, повторил)
в какой программе делал эту анимацию в видео ?
Очень полезное видео спасибо!
Ну прям топ 😁
Thank you very much🙂
0:42 - если действительно верно то, что чем меньше перспектива, тем ближе наш глаз к объекту, то почему при задании отрицательного значения translateZ(-100px) при уменьшении перспективы объект тоже уменьшается?
Can you please explain the javascript code (in Russian is good). I changed the onkeydown to onmouseover, but the problem is that the cube is rotating even if my mouse hovers over other elements (other divs, buttons). If you could do some javascript tutorials that would be very appreciated! Thanks
Хорошо объяснил!
Как сделать слайдер с таким транформом как в конце показано? Что бы при переходе картинка резалась и поочередно переворачивала части
Молодец! Мне все понятно.
Kamil Niftaliev привет возможно ли сделать треугольник 3d?
Great video man! Keep on doing good videos like this and you will get to top!!! :)
Отличное видео, спасибо
Топчик!
Tus videos son excelentes, sigue así!!
Крутой урок!!!!
Супер)!
Огонь
Красава! Отличное видео
Супер. Спасибо!!!
очень полезно, спасибо!
?? Awesome 👍👍
I didn't understand what you said .. whole video ..but you give the information and you clearified everything
Вместо background-image
Можно использовать
Background-image:Black;
для 3д нужно что то скачать? а то у меня css не работает
*Крутое видео !*
Крутой видос )
Watching this video and hearing it explained in Russian is way cool...
помогите с правильностью написания JS взял код с исходника а куб не вращаеться!
RED
GREEN
BLUE
PURPLE
YELLOW
TOMATO
СSS
/*3D transform*/
.new{
width: 300px;
height: 300px;
perspective: 500px;
position: relative;
margin: 200px auto;
}
.cube{
width: inherit;
height: inherit;
transform-style: preserve-3d;
transform: rotateY(130deg);
}
.sketch{
width: inherit;
height: inherit;
position: absolute;
text-align: center;
border: 1px solid #000;
line-height: 300px;
}
.front {
transform: translateZ(150px);
}
.back {
transform: rotateY(180deg) translateZ(150px);
}
.right {
transform: rotateY(90deg) translateZ(150px);
}
.left {
transform: rotateY(-90deg) translateZ(150px);
}
.top {
transform: rotateX(90deg) translateZ(150px);
}
.bottom {
transform: rotateX(-90deg) translateZ(150px);
}
/*3D transform*/
JS
(function () {
var rotateY = 0,
rotateX = 0;
document.onkeydown = function (e) {
if (e.keyCode === 37) rotateY -= 4
else if (e.keyCode === 38) rotateX += 4
else if (e.keyCode === 39) rotateY += 4
else if (e.keyCode === 40) rotateX -= 4
document.querySelector('.cube').style.transform =
'rotateY(' + rotateY + 'deg)'+
'rotateX(' + rotateX + 'deg)';
}
})();
Круто
спасибо за видео!
а как сделать так, чтобы куб вращался постоянно?
css keyframes
👍👍👍
Thank you , very good tutorial video .. You are amazing .. Go on ..!
круто
Я сделал точно также как у вас но почему то у меня не работает translateZ(150deg) для right, left, top и bottom. И уменя не получается куб.
Nice video and editing also
siz oyredirsinizmi proqramlawdirilmani?
А как ти на 6:27 курсор размножил?
Блин я люблю эти коды ...
сильное видео.
если я хочу сделать что бы конверт (а это 4 треугольника) раскрывался. по очереди с каждой стороны. как связать части конверта и сделать что бы потом анимация не возвращалась в исходное или возвращалась и начиналась по клику (но это скорее всего джава скрипт уже). это вообще реально адекватно реализовать? пока проблема с возвращением в исходное и то что (главное) стороны конверта изза абсолютного позиционирования срабатывают какая успеет первой (писал не через кейфрейм.). и они бессвязны между собой никак. ломаю голову день уже. любитель самоучка я если что))
Недосмотрел,но за такую визуализацию лакс.
Это бля словами не описать, это ахуенно
охуеть. Огромное спасибо за видос.
Отличное видео!
Если будут еще видео на русском, то подписываюсь
Познавательно!
Красивое видео, даже подписался. Но остальные ролики на незнакомом мне языке :(
Как будто Sorax посмотрел. Удивился качеством, чекнул канал - а он заброшен =с
Good video! Can you make English subtitles?
у меня чето с Джава кодом не пошло видимо я гдето ошибку допустил не понимаю