CSS 3D Трансформации. Пример с 3D кубом

[@equebitcutnett2889]

Я поражаюсь тому, какой объем работы ты проделал чтобы показать нам это видео, оно очень трудоемкое и главное очень понятное. Спасибо Большое!

[@bogdan_ov]

Все в 10 видео вместить не могут, а ты в 1 видео показал, да ещё и рассказал! Все понятно. Спосибо!!!!!!!!!!!

[@eugenex8892]

Я думал я старый стал, сарказмный на ютубе все видео минусую. Но тут прям рука из под одеяла сама лезет лайк поставить. Спасибо за классное видео. Особенно понравилось как написание CSS кода с превью результата сделал. Побольше-бы таких понятных классных видосов.

[@andreyka7559]

Ну, если ещё рука под одеялом, значит, не такой уж и старый! 😁

[@eugenex8892]

@@andreyka7559 она там греется, а не то что ты подумал ))))

[@andreyka7559]

@@eugenex8892 Так и я думаю, что нагревается от движения. 😁

[@eugenex8892]

@@andreyka7559 ну уж не надо же по себе ровнять... Если у тебя от движения греется, то я рад за тебя...пущай у тебя там греется от движения...

[@AryaVicky]

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 👍🏼

[@IvanIvanov-oi5nx]

занимаюсь бекенд-разработкой зашел сюда случайно и ... вах-вах круто! лайк!!!

[@AlexTriumf-b6r]

Очень хорошо обьясняешь, просто все по делу без воды, мне бы таких преподов в универ, я бы со 2 курса устроился по профессии. Спасибо большое таким людям как вы, кто помогает в обучении будущих разработчиков)

[@nekit163206]

Просто невероятно! Как у тебя получилось так качественно, информативно и красиво все сделать... Аплодирую стоя! 10 минут на одном дыхании!!!

[@sashagorodetskiy1929]

Как-то обидно, что так мало людей это увидило и увидит... Столько работы... Спасибо за урок!

[@BloodVesselTM]

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

[@alexfov3189]

Редко пишу комментарии, но это было круто. Все четко и наглядно рассказано. Спасибо!

[@Олег130-н6п]

Просто супер, большущее спасибо! Сильно помогло с реальной рабочей задачей

[@waden666]

Одно из самых крутых объяснений css свойств и вывода анимашки с ними, спасибо большое за видео, автор ты красавчик =).

[@suhrobadilov533]

Красавчик!!! Коротко, чётко, ясно!

[@simongreyse4171]

Жесть, все б так подходили к созданию контента. Очень крутое объяснение

[@videocasetteTV]

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

[@АндрейГоляновский-х4й]

this is russia )))

[@splicegodlovessplice]

@@АндрейГоляновский-х4й That's exactly what he said...

[@1001-w5q]

Did you get why he didn't want to explain how rotate3D() works?:D

[@waden666]

@@1001-w5q He told that people usually never use it, cause it works not stable and hard for understand...

[@2004-q1h]

Очень шикарный урок. Спасибо за труды!

[@yuriiyablonskyi6626]

ничего себе какая подача))) прям топ спасибо!!!!!!!

[@WEBSTART-LIVE]

Спасибо, коротко и без воды!

[@span4ev]

Автор красавчик. Не поленился сделать в видео редакторе анимацию, наглядно всё показать и объяснить. Качество подачи материала шикарное. Не то, что эти ленивые жопы, которые в пейнте рисуют ) Спасибо.

[@sarcastic_bhoi1418]

No one can teach me like u!You are such a SUPER TEACHER that left an impression on me!)))

[@elonmusk2142]

are you from UZB

[@lisofsky8151]

Бодрит видос как чашка кофе

[@ea5970]

Очень понятно объяснил. Как уж тут лайк не поставить

[@ВладиславВанюшкин-г6б]

Шикарный видос, благодарю

[@yurakep4642]

Это годно и достойно большего количества просмотров. Занимайся этим, получается на уровне

[@dudistaslive6426]

Большое спасибо) Все понятно и доступно)) +++

[@poezia_play]

По началу не работал js Потом я перепроверил и понял что забыл прописать

[@iammetelskiy]

Шикарный видео ряд!

[@ogorkos]

Классно объясняешь. Наглядно. Так держать!

[@AnatoliiKravchenko]

Очень четко,ты класно объясняешь!

[@gamegod6769]

Всё максимально понятно объяснил. По больше бы таких

[@АртемЛитвинов-м9ю]

Качественный видос спасибо! 10 из 10

[@NanNan-nb4qf]

Чётко, ясно, внятно, понятно, подписка, лайк!

[@CristianRomero-up1nj]

Greeting from Buenos Aires. What a useful css video. Keep up the good work dude

[@duho3avr745]

Нихуя себе чувак, вот это ты разложил все помполочкам, как же охуееено все понимаешь когда видишь !!! Спасибо за работу кэп

[@ДмитрийВолокитин-я8ф]

Очень хорошее видео. Спасибо большое

[@Gamesargs]

Вот это было хорошо. Быстро, доходчиво и всё

[@maltamagistro]

0:42 - если действительно верно то, что чем меньше перспектива, тем ближе наш глаз к объекту, то почему при задании отрицательного значения translateZ(-100px) при уменьшении перспективы объект тоже уменьшается?

[@alexvei7299]

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

[@КямаляНифталиева]

Спасибо вам за такие видео

[@Kljopa]

зачётно и музончик что надо в видео у тебя! круто! спасибо

[@arisesbosinov9281]

класс нет слов братан

[@RaulHernandez-pq3bi]

Tus videos son excelentes, sigue así!!

[@kukusikibabasikitv]

Очень-очень круто!💪👍👍👍

[@josemanuelcruzsanchez4190]

Great video man! Keep on doing good videos like this and you will get to top!!! :)

[@АндрейГоляновский-х4й]

однозначно лайк! качественный урок!

[@kvola2478]

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

[@_rohit_s]

?? Awesome 👍👍 I didn't understand what you said .. whole video ..but you give the information and you clearified everything

[@poezia_play]

Вместо background-image Можно использовать Background-image:Black;

[@TheJonvish]

Спасибо друг. Реально помог.

[@vaspurakavdalian1133]

Sagol,molodec.Profesionalno

[@Raz_dva108]

Wow, как наглядно

[@TheDogbreath1]

Watching this video and hearing it explained in Russian is way cool...

[@ciomio3703]

awesome, shikarno

[@nazar4351]

А как ти на 6:27 курсор размножил?

[@supkilerAOFF]

в какой программе делал эту анимацию в видео ?

[@thang8617]

what software do you use to create anmation?

[@volodymyrselevertov]

Спасибо за информативность, брат

[@guyxxxxxxxx]

Молодец! Мне все понятно.

[@ihatetoys1528]

Потрясно!! Спасибо!

[@игорьшуманский-ч6м]

Kamil Niftaliev привет возможно ли сделать треугольник 3d?

[@gamegod6769]

Очень полезное видео спасибо!

[@pandanbk]

для 3д нужно что то скачать? а то у меня css не работает

[@stole-name]

Очень круто и понятно!

[@ДмитрийШухов-п1э]

Спасибо, повторил)

[@ДмитрийГригорьев-у6ф]

Почему Вы не указали расстояние по оси Z = -150px для отдаления заднего блока (back)? Заранее спасибо за ответ!

[@anstapol]

Как сделать слайдер с таким транформом как в конце показано? Что бы при переходе картинка резалась и поочередно переворачивала части

[@sakhawi2009]

Thank you , very good tutorial video .. You are amazing .. Go on ..!

[@IzzatAzamjon]

Thank you very much🙂

[@the.lightfall]

Как будто Sorax посмотрел. Удивился качеством, чекнул канал - а он заброшен =с

[@iskakakak]

Ну прям топ 😁

[@SycoonGaming]

Good video! Can you make English subtitles?

[@gayonsmetana2424]

легенда

[@umidjonsadatov3426]

Просто замечательно

[@ProWichDoctor]

помогите с правильностью написания 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)'; } })();

[@NieroMuZikanto]

Красава! Отличное видео

[@абдувалиабдувохидов-б2ц]

Я сделал точно также как у вас но почему то у меня не работает translateZ(150deg) для right, left, top и bottom. И уменя не получается куб.

[@sashabrice5927]

Отличное видео, спасибо

[@АннаЕлиневич-р7п]

спасибо за видео! а как сделать так, чтобы куб вращался постоянно?

[@zeusvasilovich]

css keyframes

[@БерраЖумадилов]

Блин я люблю эти коды ...

[@RHacks]

Nice video and editing also

[@LiveLove-vh3sp]

siz oyredirsinizmi proqramlawdirilmani?

[@СергейТуманов-з5ц]

Хорошо объяснил!

[@webypanda2861]

очень полезно, спасибо!

[@ГеннадийУдарцев-ф9е]

👍👍👍

[@sashatv138]

Супер. Спасибо!!!

[@M83-wit]

Это бля словами не описать, это ахуенно

[@egyptbookof]

Отличное видео! Если будут еще видео на русском, то подписываюсь

[@камильсалиев-б6т]

у меня чето с Джава кодом не пошло видимо я гдето ошибку допустил не понимаю

[@MrEttirammstein]

Топчик!

[@WeCanTalkAboutThis]

Огонь

[@leksdex5682]

если я хочу сделать что бы конверт (а это 4 треугольника) раскрывался. по очереди с каждой стороны. как связать части конверта и сделать что бы потом анимация не возвращалась в исходное или возвращалась и начиналась по клику (но это скорее всего джава скрипт уже). это вообще реально адекватно реализовать? пока проблема с возвращением в исходное и то что (главное) стороны конверта изза абсолютного позиционирования срабатывают какая успеет первой (писал не через кейфрейм.). и они бессвязны между собой никак. ломаю голову день уже. любитель самоучка я если что))

[@lets_catch_the_light]

Крутой урок!!!!

[@davidarsenyan3433]

Крутой видос )

[@npc6110]

*Крутое видео !*

[@baurbaur332]

Недосмотрел,но за такую визуализацию лакс.

[@Vpisotski]

охуеть. Огромное спасибо за видос.

[@СергейАнанасик]

Надеюсь Sorax не против)))

[@MrHazard32]

Красивое видео, даже подписался. Но остальные ролики на незнакомом мне языке :(

[@dinir1000]

Супер)!

[@AndresKaen]

сильное видео.

[@FA1F.W]

Нееет, вот имено это я ищу rotate3d и взаимосвязь с матрицами т.к. в спецификации в перечисляемых параметрах rotate3d совсем не матрица