CSS 3D Трансформации. Пример с 3D кубом
Вставка
- Опубліковано 21 вер 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
Все в 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 курса устроился по профессии. Спасибо большое таким людям как вы, кто помогает в обучении будущих разработчиков)
Редко пишу комментарии, но это было круто. Все четко и наглядно рассказано. Спасибо!
Жесть, все б так подходили к созданию контента.
Очень крутое объяснение
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...
Прекрасный урок, кого не смотрю они ленятся объяснять или не объясняют вообще, но ты просто лучший так держать спасибо тебе за урок!
Одно из самых крутых объяснений css свойств и вывода анимашки с ними, спасибо большое за видео, автор ты красавчик =).
Как-то обидно, что так мало людей это увидило и увидит... Столько работы... Спасибо за урок!
Красавчик!!! Коротко, чётко, ясно!
Просто супер, большущее спасибо! Сильно помогло с реальной рабочей задачей
Автор красавчик. Не поленился сделать в видео редакторе анимацию, наглядно всё показать и объяснить. Качество подачи материала шикарное. Не то, что эти ленивые жопы, которые в пейнте рисуют ) Спасибо.
Бодрит видос как чашка кофе
Шикарный видео ряд!
Шикарный видос, благодарю
Очень шикарный урок. Спасибо за труды!
Спасибо, коротко и без воды!
ничего себе какая подача)))
прям топ
спасибо!!!!!!!
Нихуя себе чувак, вот это ты разложил все помполочкам, как же охуееено все понимаешь когда видишь !!! Спасибо за работу кэп
Очень хорошее видео. Спасибо большое
Sagol,molodec.Profesionalno
Спасибо вам за такие видео
Большое спасибо) Все понятно и доступно)) +++
По началу не работал js
Потом я перепроверил и понял что забыл прописать
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
Классно объясняешь. Наглядно. Так держать!
Вот это было хорошо. Быстро, доходчиво и всё
awesome, shikarno
Wow, как наглядно
Чётко, ясно, внятно, понятно, подписка, лайк!
легенда
Thank you very much🙂
Greeting from Buenos Aires. What a useful css video. Keep up the good work dude
зачётно и музончик что надо в видео у тебя! круто! спасибо
Спасибо, повторил)
Спасибо за урок и за ссылку на кодепен, без нее бы не понял, почему у меня не работает))
Tus videos son excelentes, sigue así!!
Ну прям топ 😁
Очень-очень круто!💪👍👍👍
однозначно лайк! качественный урок!
Great video man! Keep on doing good videos like this and you will get to top!!! :)
Огонь
Молодец! Мне все понятно.
Супер)!
Спасибо друг. Реально помог.
Спасибо за информативность, брат
Потрясно!! Спасибо!
?? 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...
Хорошо объяснил!
круто
Супер. Спасибо!!!
Отличное видео!
Если будут еще видео на русском, то подписываюсь
Красивое видео, даже подписался. Но остальные ролики на незнакомом мне языке :(
Блин я люблю эти коды ...
очень полезно, спасибо!
Красава! Отличное видео
Недосмотрел,но за такую визуализацию лакс.
Thank you , very good tutorial video .. You are amazing .. Go on ..!
охуеть. Огромное спасибо за видос.
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
Вместо background-image
Можно использовать
Background-image:Black;
Крутой урок!!!!
*Крутое видео !*
0:42 - если действительно верно то, что чем меньше перспектива, тем ближе наш глаз к объекту, то почему при задании отрицательного значения translateZ(-100px) при уменьшении перспективы объект тоже уменьшается?
Крутой видос )
Nice video and editing also
Надеюсь Sorax не против)))
Топчик!
сильное видео.
Познавательно!
помогите с правильностью написания 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)';
}
})();
Как сделать слайдер с таким транформом как в конце показано? Что бы при переходе картинка резалась и поочередно переворачивала части
Good video! Can you make English subtitles?
Это бля словами не описать, это ахуенно
Почему Вы не указали расстояние по оси Z = -150px для отдаления заднего блока (back)?
Заранее спасибо за ответ!
Как будто Sorax посмотрел. Удивился качеством, чекнул канал - а он заброшен =с
для 3д нужно что то скачать? а то у меня css не работает
спасибо за видео!
а как сделать так, чтобы куб вращался постоянно?
css keyframes
в какой программе делал эту анимацию в видео ?
Я сделал точно также как у вас но почему то у меня не работает translateZ(150deg) для right, left, top и bottom. И уменя не получается куб.
Kamil Niftaliev привет возможно ли сделать треугольник 3d?
а чё js код не объяснил то, для общей информации...
хотя разобрался....
в исходниках же есть, да и не сложный он
если я хочу сделать что бы конверт (а это 4 треугольника) раскрывался. по очереди с каждой стороны. как связать части конверта и сделать что бы потом анимация не возвращалась в исходное или возвращалась и начиналась по клику (но это скорее всего джава скрипт уже). это вообще реально адекватно реализовать? пока проблема с возвращением в исходное и то что (главное) стороны конверта изза абсолютного позиционирования срабатывают какая успеет первой (писал не через кейфрейм.). и они бессвязны между собой никак. ломаю голову день уже. любитель самоучка я если что))
Нееет, вот имено это я ищу rotate3d и взаимосвязь с матрицами т.к. в спецификации в перечисляемых параметрах rotate3d совсем не матрица