CSS 3D Трансформации. Пример с 3D кубом
HTML-код
- Опубликовано: 4 мар 2016
- Исходники + 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
Все в 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 )))
@@user-fc3gh1rb7w That's exactly what he said...
Did you get why he didn't want to explain how rotate3D() works?:D
@@user-yd7db3wd7w He told that people usually never use it, cause it works not stable and hard for understand...
Редко пишу комментарии, но это было круто. Все четко и наглядно рассказано. Спасибо!
Прекрасный урок, кого не смотрю они ленятся объяснять или не объясняют вообще, но ты просто лучший так держать спасибо тебе за урок!
Очень шикарный урок. Спасибо за труды!
Шикарный видео ряд!
Автор красавчик. Не поленился сделать в видео редакторе анимацию, наглядно всё показать и объяснить. Качество подачи материала шикарное. Не то, что эти ленивые жопы, которые в пейнте рисуют ) Спасибо.
Спасибо, коротко и без воды!
Просто супер, большущее спасибо! Сильно помогло с реальной рабочей задачей
Бодрит видос как чашка кофе
ничего себе какая подача)))
прям топ
спасибо!!!!!!!
Шикарный видос, благодарю
Очень четко,ты класно объясняешь!
Tus videos son excelentes, sigue así!!
Классно объясняешь. Наглядно. Так держать!
Всё максимально понятно объяснил. По больше бы таких
Это годно и достойно большего количества просмотров. Занимайся этим, получается на уровне
зачётно и музончик что надо в видео у тебя! круто! спасибо
Greeting from Buenos Aires. What a useful css video. Keep up the good work dude
Качественный видос спасибо! 10 из 10
Нихуя себе чувак, вот это ты разложил все помполочкам, как же охуееено все понимаешь когда видишь !!! Спасибо за работу кэп
Вот это было хорошо. Быстро, доходчиво и всё
Спасибо за урок и за ссылку на кодепен, без нее бы не понял, почему у меня не работает))
Чётко, ясно, внятно, понятно, подписка, лайк!
No one can teach me like u!You are such a SUPER TEACHER that left an impression on me!)))
are you from UZB
Спасибо вам за такие видео
однозначно лайк! качественный урок!
Спасибо за информативность, брат
Great video man! Keep on doing good videos like this and you will get to top!!! :)
Большое спасибо) Все понятно и доступно)) +++
По началу не работал js
Потом я перепроверил и понял что забыл прописать
Очень хорошее видео. Спасибо большое
Очень понятно объяснил. Как уж тут лайк не поставить
Очень полезное видео спасибо!
Спасибо друг. Реально помог.
Очень круто и понятно!
Потрясно!! Спасибо!
Отличное видео, спасибо
Молодец! Мне все понятно.
Очень-очень круто!💪👍👍👍
Sagol,molodec.Profesionalno
класс нет слов братан
Хорошо объяснил!
Красава! Отличное видео
Nice video and editing also
Просто замечательно
Thank you , very good tutorial video .. You are amazing .. Go on ..!
Крутой урок!!!!
*Крутое видео !*
awesome, shikarno
Супер. Спасибо!!!
Крутой видос )
очень полезно, спасибо!
легенда
Thank you very much🙂
Супер)!
Ну прям топ 😁
Wow, как наглядно
Спасибо, повторил)
Топчик!
Познавательно!
Огонь
сильное видео.
Круто
?? Awesome 👍👍
I didn't understand what you said .. whole video ..but you give the information and you clearified everything
Блин я люблю эти коды ...
круто
четко
Watching this video and hearing it explained in Russian is way cool...
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
Как сделать слайдер с таким транформом как в конце показано? Что бы при переходе картинка резалась и поочередно переворачивала части
👍👍👍
Красивое видео, даже подписался. Но остальные ролики на незнакомом мне языке :(
Good video! Can you make English subtitles?
Отличное видео!
Если будут еще видео на русском, то подписываюсь
охуеть. Огромное спасибо за видос.
Это бля словами не описать, это ахуенно
Надеюсь Sorax не против)))
Почему Вы не указали расстояние по оси Z = -150px для отдаления заднего блока (back)?
Заранее спасибо за ответ!
Недосмотрел,но за такую визуализацию лакс.
0:42 - если действительно верно то, что чем меньше перспектива, тем ближе наш глаз к объекту, то почему при задании отрицательного значения translateZ(-100px) при уменьшении перспективы объект тоже уменьшается?
Вместо background-image
Можно использовать
Background-image:Black;
Kamil Niftaliev привет возможно ли сделать треугольник 3d?
спасибо за видео!
а как сделать так, чтобы куб вращался постоянно?
css keyframes
siz oyredirsinizmi proqramlawdirilmani?
для 3д нужно что то скачать? а то у меня css не работает
в какой программе делал эту анимацию в видео ?
у меня чето с Джава кодом не пошло видимо я гдето ошибку допустил не понимаю
Я сделал точно также как у вас но почему то у меня не работает translateZ(150deg) для right, left, top и bottom. И уменя не получается куб.
А как ти на 6:27 курсор размножил?
если я хочу сделать что бы конверт (а это 4 треугольника) раскрывался. по очереди с каждой стороны. как связать части конверта и сделать что бы потом анимация не возвращалась в исходное или возвращалась и начиналась по клику (но это скорее всего джава скрипт уже). это вообще реально адекватно реализовать? пока проблема с возвращением в исходное и то что (главное) стороны конверта изза абсолютного позиционирования срабатывают какая успеет первой (писал не через кейфрейм.). и они бессвязны между собой никак. ломаю голову день уже. любитель самоучка я если что))