CSS 3D Трансформации. Пример с 3D кубом
Рет қаралды 79,709
8 жыл бұрынИсходники + Demo: codepen.io/kamilniftaliev/full...
Список свойств:
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
@bogdan_ov 5 жыл бұрын
Все в 10 видео вместить не могут, а ты в 1 видео показал, да ещё и рассказал! Все понятно. Спосибо!!!!!!!!!!!
@equebitcutnett2889 4 жыл бұрын
Я поражаюсь тому, какой объем работы ты проделал чтобы показать нам это видео, оно очень трудоемкое и главное очень понятное. Спасибо Большое!
@eugenex8892 8 жыл бұрын
Я думал я старый стал, сарказмный на ютубе все видео минусую. Но тут прям рука из под одеяла сама лезет лайк поставить. Спасибо за классное видео. Особенно понравилось как написание CSS кода с превью результата сделал. Побольше-бы таких понятных классных видосов.
@andreyka7559 4 жыл бұрын
Ну, если ещё рука под одеялом, значит, не такой уж и старый! 😁
@eugenex8892 4 жыл бұрын
@@andreyka7559 она там греется, а не то что ты подумал ))))
@andreyka7559 4 жыл бұрын
@@eugenex8892 Так и я думаю, что нагревается от движения. 😁
@eugenex8892 4 жыл бұрын
@@andreyka7559 ну уж не надо же по себе ровнять... Если у тебя от движения греется, то я рад за тебя...пущай у тебя там греется от движения...
@AryaVicky 3 жыл бұрын
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 👍🏼
@suhrobadilov533 8 жыл бұрын
Красавчик!!! Коротко, чётко, ясно!
@nekit163206 2 жыл бұрын
Просто невероятно! Как у тебя получилось так качественно, информативно и красиво все сделать... Аплодирую стоя! 10 минут на одном дыхании!!!
@videocasetteTV 7 жыл бұрын
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
@user-fc3gh1rb7w 5 жыл бұрын
this is russia )))
@keta3933 4 жыл бұрын
@@user-fc3gh1rb7w That's exactly what he said...
@user-yd7db3wd7w 4 жыл бұрын
Did you get why he didn't want to explain how rotate3D() works?:D
@waden666 3 жыл бұрын
@@user-yd7db3wd7w He told that people usually never use it, cause it works not stable and hard for understand...
@waden666 3 жыл бұрын
Одно из самых крутых объяснений css свойств и вывода анимашки с ними, спасибо большое за видео, автор ты красавчик =).
@user-jo3bo4xp3v 2 жыл бұрын
Очень хорошо обьясняешь, просто все по делу без воды, мне бы таких преподов в универ, я бы со 2 курса устроился по профессии. Спасибо большое таким людям как вы, кто помогает в обучении будущих разработчиков)
@alexfov3189 6 жыл бұрын
Редко пишу комментарии, но это было круто. Все четко и наглядно рассказано. Спасибо!
@WEBSTART-LIVE 4 жыл бұрын
Спасибо, коротко и без воды!
@user-cd3sl2si4z 3 жыл бұрын
Очень шикарный урок. Спасибо за труды!
@sergeygreyse4171 6 жыл бұрын
Жесть, все б так подходили к созданию контента. Очень крутое объяснение
@sashagorodetskiy1929 4 жыл бұрын
Как-то обидно, что так мало людей это увидило и увидит... Столько работы... Спасибо за урок!
@user-yt2dj8cv4j Жыл бұрын
Просто супер, большущее спасибо! Сильно помогло с реальной рабочей задачей
@iammetelskiy Жыл бұрын
Шикарный видео ряд!
@user-hx9og2rm8i 9 ай бұрын
Шикарный видос, благодарю
@BloodVesselTM 5 жыл бұрын
Прекрасный урок, кого не смотрю они ленятся объяснять или не объясняют вообще, но ты просто лучший так держать спасибо тебе за урок!
@yuriiyablonskyi6626 4 жыл бұрын
ничего себе какая подача))) прям топ спасибо!!!!!!!
@AnatoliiKravchenko 6 жыл бұрын
Очень четко,ты класно объясняешь!
@gamegod6769 6 жыл бұрын
Всё максимально понятно объяснил. По больше бы таких
@IvanIvanov-oi5nx 5 жыл бұрын
занимаюсь бекенд-разработкой зашел сюда случайно и ... вах-вах круто! лайк!!!
@yurakep4642 5 жыл бұрын
Это годно и достойно большего количества просмотров. Занимайся этим, получается на уровне
@user-cl5nm9wm8c Жыл бұрын
Спасибо вам за такие видео
@user-cf4ei8wh7n 4 жыл бұрын
Качественный видос спасибо! 10 из 10
@ogorkos 3 жыл бұрын
Классно объясняешь. Наглядно. Так держать!
@RaulHernandez-pq3bi 7 жыл бұрын
Tus videos son excelentes, sigue así!!
@NanNan-nb4qf 3 жыл бұрын
Чётко, ясно, внятно, понятно, подписка, лайк!
@Kljopa 6 жыл бұрын
зачётно и музончик что надо в видео у тебя! круто! спасибо
@lisofsky8151 3 жыл бұрын
Бодрит видос как чашка кофе
@Gamesargs 4 жыл бұрын
Вот это было хорошо. Быстро, доходчиво и всё
@user-wg6lw4uz8p Жыл бұрын
Очень хорошее видео. Спасибо большое
@volodymyrselevertov 5 жыл бұрын
Спасибо за информативность, брат
@CristianRomero-up1nj 4 жыл бұрын
Greeting from Buenos Aires. What a useful css video. Keep up the good work dude
@gamegod6769 6 жыл бұрын
Очень полезное видео спасибо!
@user-fc3gh1rb7w 5 жыл бұрын
однозначно лайк! качественный урок!
@TheJonvish 4 жыл бұрын
Спасибо друг. Реально помог.
@ihatetoys1528 3 жыл бұрын
Потрясно!! Спасибо!
@sashabrice5927 6 жыл бұрын
Отличное видео, спасибо
@kukusikibabasikitv 3 жыл бұрын
Очень-очень круто!💪👍👍👍
@stole-name 4 жыл бұрын
Очень круто и понятно!
@ea5970 4 жыл бұрын
Очень понятно объяснил. Как уж тут лайк не поставить
@guyxxxxxxxx 7 жыл бұрын
Молодец! Мне все понятно.
@umidjonsadatov3426 5 жыл бұрын
Просто замечательно
@dudistaslive6426 8 жыл бұрын
Большое спасибо) Все понятно и доступно)) +++
@poezia_play 2 жыл бұрын
По началу не работал js Потом я перепроверил и понял что забыл прописать
@josemanuelcruzsanchez4190 4 жыл бұрын
Great video man! Keep on doing good videos like this and you will get to top!!! :)
@span4ev 6 жыл бұрын
Автор красавчик. Не поленился сделать в видео редакторе анимацию, наглядно всё показать и объяснить. Качество подачи материала шикарное. Не то, что эти ленивые жопы, которые в пейнте рисуют ) Спасибо.
@sashatv138 4 жыл бұрын
Супер. Спасибо!!!
@vaspurakavdalian1133 9 ай бұрын
Sagol,molodec.Profesionalno
@Izzatillo_Abdullayev Жыл бұрын
Thank you very much🙂
@arisesbosinov9281 3 жыл бұрын
класс нет слов братан
@user-hd1ix3vg9l 5 жыл бұрын
Хорошо объяснил!
@webypanda2861 4 жыл бұрын
очень полезно, спасибо!
@sarcastic_bhoi1418 6 жыл бұрын
No one can teach me like u!You are such a SUPER TEACHER that left an impression on me!)))
@elonmusk2142 6 жыл бұрын
are you from UZB
@ciomio3703 Жыл бұрын
awesome, shikarno
@freespheretm398 5 жыл бұрын
Красава! Отличное видео
@alexvei7299 5 жыл бұрын
Спасибо за урок и за ссылку на кодепен, без нее бы не понял, почему у меня не работает))
@npc6110 6 жыл бұрын
*Крутое видео !*
@RHacks 5 жыл бұрын
Nice video and editing also
@lets_catch_the_light 6 жыл бұрын
Крутой урок!!!!
@davidarsenyan3433 5 жыл бұрын
Крутой видос )
@sakhawi2009 7 жыл бұрын
Thank you , very good tutorial video .. You are amazing .. Go on ..!
@iskak9 Жыл бұрын
Ну прям топ 😁
@dinir1000 4 жыл бұрын
Супер)!
@gayonsmetana2424 2 жыл бұрын
легенда
@user-jc6pl2xj7k 2 жыл бұрын
Спасибо, повторил)
@WeCanTalkAboutThis 4 жыл бұрын
Огонь
@duho3avr745 6 жыл бұрын
Нихуя себе чувак, вот это ты разложил все помполочкам, как же охуееено все понимаешь когда видишь !!! Спасибо за работу кэп
@Raz_dva108 3 жыл бұрын
Wow, как наглядно
@MrEttirammstein 5 жыл бұрын
Топчик!
@AndresKaen 6 жыл бұрын
сильное видео.
@cryptoevil5457 7 жыл бұрын
Познавательно!
@user-js4il4tp9h 4 жыл бұрын
Круто
@antontraceur 7 жыл бұрын
Как сделать слайдер с таким транформом как в конце показано? Что бы при переходе картинка резалась и поочередно переворачивала части
@user-wh6cm5iv3i 5 жыл бұрын
круто
@alexshel8578 3 жыл бұрын
четко
@user-ln2io4wo9p 7 жыл бұрын
Блин я люблю эти коды ...
@TheDogbreath1 6 жыл бұрын
Watching this video and hearing it explained in Russian is way cool...
@user-dp8ij9oc6e 4 ай бұрын
👍👍👍
@_rohit_s 4 жыл бұрын
?? Awesome 👍👍 I didn't understand what you said .. whole video ..but you give the information and you clearified everything
@kvola2478 7 жыл бұрын
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
@Vpisotski 4 жыл бұрын
охуеть. Огромное спасибо за видос.
@SycoonGaming 8 жыл бұрын
Good video! Can you make English subtitles?
@user-yb8sk4kg9y 7 жыл бұрын
Почему Вы не указали расстояние по оси Z = -150px для отдаления заднего блока (back)? Заранее спасибо за ответ!
@MrHazard32 7 жыл бұрын
Красивое видео, даже подписался. Но остальные ролики на незнакомом мне языке :(
@fsociety4139 4 жыл бұрын
Это бля словами не описать, это ахуенно
@egyptbookof 6 жыл бұрын
Отличное видео! Если будут еще видео на русском, то подписываюсь
@maltamagistro Жыл бұрын
0:42 - если действительно верно то, что чем меньше перспектива, тем ближе наш глаз к объекту, то почему при задании отрицательного значения translateZ(-100px) при уменьшении перспективы объект тоже уменьшается?
@user-sq1zv8br4u 6 жыл бұрын
Надеюсь Sorax не против)))
@user-tz3rz8my2y 4 жыл бұрын
Kamil Niftaliev привет возможно ли сделать треугольник 3d?
@user-dd6pc9ot5k 4 жыл бұрын
спасибо за видео! а как сделать так, чтобы куб вращался постоянно?
@zeusvasilovich 3 жыл бұрын
css keyframes
@poezia_play 2 жыл бұрын
Вместо background-image Можно использовать Background-image:Black;
@supkilerAOFF 4 жыл бұрын
в какой программе делал эту анимацию в видео ?
@pandanbk 2 жыл бұрын
для 3д нужно что то скачать? а то у меня css не работает
@baurbaur332 4 жыл бұрын
Недосмотрел,но за такую визуализацию лакс.
@user-zz8lr3cb6x 5 жыл бұрын
Я сделал точно также как у вас но почему то у меня не работает translateZ(150deg) для right, left, top и bottom. И уменя не получается куб.
@nazar4351 2 жыл бұрын
А как ти на 6:27 курсор размножил?
@user-ou2lk8bd3x 6 жыл бұрын
у меня чето с Джава кодом не пошло видимо я гдето ошибку допустил не понимаю
@LiveLove-vh3sp 3 жыл бұрын
siz oyredirsinizmi proqramlawdirilmani?
@leksdex5682 5 жыл бұрын
если я хочу сделать что бы конверт (а это 4 треугольника) раскрывался. по очереди с каждой стороны. как связать части конверта и сделать что бы потом анимация не возвращалась в исходное или возвращалась и начиналась по клику (но это скорее всего джава скрипт уже). это вообще реально адекватно реализовать? пока проблема с возвращением в исходное и то что (главное) стороны конверта изза абсолютного позиционирования срабатывают какая успеет первой (писал не через кейфрейм.). и они бессвязны между собой никак. ломаю голову день уже. любитель самоучка я если что))
Фрілансер по життю
Рет қаралды 185 М.
Redem Studio
Рет қаралды 2,8 М.
PurpleSchool | Anton Larichev
Рет қаралды 4,9 М.