Inter-Net.PRO

3D трансформации в CSS

  • 161 37
18 дек 2017 03:44 #1 от Inter-Net PRO
3D куб на CSS
  Хочу показать вам шикарное видео,...

3D cub  Очень часто когда изучаешь что то новое, то получается быстро понять материал и приходят идеи где и как это применить.

   Ну и думаю у многих бывает такое, что когда отходишь от темы на месяц-два, то потом всё забываешь и чтобы вспомнить и разобрать код нужно время.

  В этой записи будут CSS свойства, которые как раз могут применяться время от времени и которые потом нужно вспоминать.

Подробнее...

  • 1
22 дек 2017 19:58 - 22 дек 2017 20:02 #2 от Sansan
Sansan ответил в теме "3D трансформации в CSS"
Видео-урок супер!
Посмотрел демо - круть!
Если можно, у меня есть вопрос. Можно на такой куб на его стороны поставить фото и видео?

  • 161 37
22 дек 2017 22:20 #3 от Inter-Net PRO

Sansan пишет: Можно на такой куб на его стороны поставить фото и видео?

Конечно можно.
Для этого в css нужно для стороны где должно быть изображение дописать к классу атрибут background-image

Пример:
background-image: url("/images/RedHot.jpg");
в скобках внутри кавычек прописывается путь к изображению. Если изображение находится на сайте, то лучше указывать относительный путь (как в примере). Если изображение на внешнем сайте, то тогда указывается полный урл к изображению начиная с http.

Если изображение не подходит по размеру стороны куба, то тогда добавляем вот так:
background-image: url("/images/RedHot.jpg");
background-attachment: fixed, fixed;
background-size: 100% 100%;
это значит что изображение будет без повторов, на всю сторону куба.
Вложения:

Авторизация

Войти через соцсети: