Как развернуть блок (div или др.) в другую сторону? (HTML, CSS, React.js)
Всем привет. Столкнулся с такой проблемой, делаю выделение на React.js (по аналогии как на рабочем столе). Все работает хорошо, но выделение работает слева-направо / сверху-вниз (top, left, width, height). Когда я перебрасываю выделение в левую сторону, чтобы оно как бы «вывернулось» — ничего не работает. Есть ли какие-то готовые параметры в CSS и HTML чтобы можно было при отрицательном значении параметров left, top и тд — выворачивать его? Либо как это сделать с помощью JS? P.S Библиотеки не предлагать
Отслеживать
задан 16 сен 2020 в 9:51
33 4 4 бронзовых знака
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Вам не надо что-либо выворачивать, вам надо правильно строить фигуру, исходя из координат курсора — clientX , clientY в эвентах mousedown , mousemove , mouseup , а также ориентируясь на смещение курсора относительно начальных координат, назовем это axisX , axisY
- Запомнить стартовую позицию курсора в эвенте mousedown , объект startPosition =
- Понять в каком направлении движется курсор в mousemove
- Если event.clientX — startPosition.clientX >= 0 , то движемся слеванаправо и прикрепляем блок относительно left , иначе справа налево прикрепляем к right .
- Если event.clientY — startPosition.clientY >= 0 , то движемся сверху вниз и прикрепляем к top , иначе — снизу вверх и прикрепляем к bottom .
- Считаем высоту и ширину элемента, с учетом смещения и прикрепления.
const root = document.querySelector('#root'); let select; //хранилище созданного select`а let startPosition //хранилище стартовой позиции; // получаем направление движения const getAxis = (startPos, newPos) => (< x: newPos.clientX - startPos.clientX, y: newPos.clientY - startPos.clientY >) //получаем позицию const getPosition = (< x, y >) => < let position = <>; (x >= 0) ? position.left = `$px` : position.right = `$px`; (y >= 0) ? position.top = `$px` : position.bottom = `$px`; return position; > //создаем селект const createSelect = () => < select = document.createElement('div'); select.classList.add('select'); root.appendChild(select); >//удаляем селект const removeSelect = () => < root.removeChild(select) //удаляем элемент select = null; //сбрасываем селект >//эвент нажатия document.addEventListener("mousedown", (< clientX, clientY >) => < startPosition = < clientX, clientY >; //записываем стартовую позицию createSelect() //создаем элемент >) //эвент передвижения document.addEventListener("mousemove", (< currentTarget, clientX, clientY >) => < //интересует только если есть селект if (select) < let axis = getAxis(startPosition, < clientX, clientY >) //получаем направление let position = getPosition(axis); //устанавливаем позицию let size = < width: `$px`, height: `$px`> //размер let style = ; select.setAttribute('style', `$ `$:$`).join(';')>`); //устанавливаем стиль > >) //Эвент отжатия document.addEventListener("mouseup", () => < removeSelect(); >) body, html < margin: 0; padding: 0; min-height: 100vh, min-width: 100vw; height: 100%; width: 100%; >#root < background: pink; height: 100%; overflow: hidden; position: relative; >.select
Как отзеркалить картинку в css
Для отражения элемента в CSS можно использовать свойство transform. Данное свойство имеет различные функции трансформаций и позволяет изменять элементы: вращать, передвигать, наклонять, масштабировать — или комбинировать данные виды трансформаций.
Чтобы отразить элемент необходимо использовать свойство transform с функцией трансформации scale() с отрицательными значениями:
- transform: scale(-1, 1) — отражение по горизонтали
- transform: scale(1, -1) — отражение по вертикали
- transform: scale(-1, -1) — одновременное отражение по горизонтали и вертикали
Как отразить изображение?
Для отражения изображения или другого элемента, в том числе текстового, применяется свойство transform и функция scale() с отрицательным значением. Варианты такие:
- transform: scale(-1, 1) — отражение по горизонтали;
- transform: scale(1, -1) — отражение по вертикали;
- transform: scale(-1, -1) — одновременное отражение по горизонтали и вертикали.
Есть также отдельные функции scaleX() и scaleY() , они отвечают за масштабирование по соответствующим координатам.
Хотя функция scale() предназначена для изменения масштаба элемента, отрицательное значение также позволяет сделать отражение. В примере 1 добавляется обычное изображение, а затем оно же, но отражённое по вертикали. Для этого к добавляется класс с именем mirrorY .
Пример 1. Отражение фотографии
Отражение .mirrorY 
Результат данного примера показан на рис. 1.
Рис. 1. Обычная фотография и фотография, отражённая по вертикали
CSS по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Как отзеркалить css
Для отражения изображения или другого элемента, в том числе текстового, применяется свойство transform и функция scale() с отрицательным значением. Варианты такие:
- transform: scale(-1, 1) — отражение по горизонтали;
- transform: scale(1, -1) — отражение по вертикали;
- transform: scale(-1, -1) — одновременное отражение по горизонтали и вертикали.
Есть также отдельные функции scaleX() и scaleY() , они отвечают за масштабирование по соответствующим координатам.
Хотя функция scale() предназначена для изменения масштаба элемента, отрицательное значение также позволяет сделать отражение. В примере 1 добавляется обычное изображение, а затем оно же, но отражённое по вертикали. Для этого к добавляется класс с именем mirrorY .
Создание эффекта отражения при помощи CSS3 и reflection.js
Эффект отражения, применяемый к изображениям – один из самых замечательных эффектов, появившихся в современном веб-дизайне.
Однако создание этого эффекта исключительно средствами CSS3 – довольно долгое и кропотливое занятие. К тому же, кроме стиля изображений, приходится менять и другие части ваших css файлов.
Другая проблема заключается в том, что ваш эффект может работать не во всех браузерах. К счастью, теперь у нас есть утилита, которая называется Reflection.js .
Она адаптирована для двух JavaScript-фреймворков: jQuery и MooTools , и значительно упрощает и ускоряет создание эффекта отражения.
В этом уроке я расскажу, как создать эффект отражения двумя способами: сначала – на чистом CSS, потом – при помощи Reflection.js.
Необходимые ресурсы
Для дальнейшей работы нам понадобятся:
- изображение на ваш вкус;
- Reflection.js ;
- время и терпение.
Здесь вы можете загрузить исходные файлы для данного урока.
CSS3-версия
В наш HTML-файл мы вставим изображение и обернём его HTML5-элементом :
Стиль
В наш CSS-файл мы должны внести следующие изменения:
- Добавить сверху изображения отступ в 60 пикселей и отцентрировать его по экрану значением auto ;
- Использовать свойство -webkit-box-reflect , чтобы отразить изображение вниз;
- Наложить на изображение маску при помощи -webkit-gradient, чтобы отобразить только часть отражения.
Используя приведённый выше код, мы получили вот такое симпатичное изображение:
Согласно сайту разработчиков Mozilla , CSS-свойство -webkit-box-reflect работает пока только в браузерах Google Chrome и Opera .
Хотя есть и другие способы получить желаемый эффект, ситуация уже ясна: создать данный эффект сложно и затратно по времени.
Но в этом деле есть и светлая сторона: Reflection.js избавит нас от необходимости заботиться о кроссбраузерности. Посмотрим, как легко мы добьёмся желаемого, используя эту библиотеку.
MooTools-версия
Установка
Прежде чем начать работать с разметкой, загрузите reflection.js и mootools.js отсюда. Нам нужно также создать ссылки на оба этих файла в шапке нашего сайта:
Разметка
В наш HTML-файл мы, как и в предыдущем примере, должны поместить изображение, обёрнутое элементом . Кроме того, добавим изображению класс reflect .
Этот класс будет использоваться reflection.js для применения одного и того же эффекта ко всем изображениям этого класса:
Скрипт
MooTools-версия скрипта использует для создания эффекта метод reflect() . Вы можете варьировать различные опции. Например, опцию « opacity » (прозрачность):
Готово! Вот как всё может быть просто с таким замечательным инструментом, как Reflection.js:
Заключение
Хотя создать эффект отражения можно при помощи только Photoshop или CSS3, это займёт много времени и поставит перед дизайнером ряд дополнительных вопросов. Библиотека Reflection.js , написанная Кристофом Бейлом, поможет вам реализовать этот замечательный эффект.
Рекомендую воспользоваться этим замечательным инструментом вместо Photoshop или прямого редактирования CSS-свойств, чтобы упростить и ускорить разработку.
Зеркальное отражение текста на CSS
Такой стиль можно увидеть на заголовках, ведь он безусловно сразу бросается в глаза. Где также не исключаю, что он отлично подойдет под логотип или другие название. С нашей стороны не нужно настраивать, если все оставить по умолчанию, а просто написать то слово, и продублировать его под отображение.
Установочный процесс:
Первый вариант:
На этом вся установка завершена, далее вы сами подстраиваете под свою стиль дизайна. Здесь отражение поставлено на opacity: 0.7, где уменьшаем, это значит ярче идет отражение, при увеличение становится прозрачнее.
Второй вариант:
Этот вариант от первого отличается, таем, что отражение нужно в CSS прописывать, а в первом все производим в самом коде. Что по настройкам, то они почти аналогичны, где также можете красиво оформить или поставить стильный шрифт.
Как отразить изображение?
Для отражения изображения или другого элемента, в том числе текста, применяется свойство transform и функция scale() . Хотя исходно эта функция предназначена для изменения масштаба элемента, отрицательное значение -1 позволяет сделать отражение.
- transform: scale(-1, 1) — отражение по горизонтали;
- transform: scale(1, -1) — отражение по вертикали;
- transform: scale(-1, -1) (или просто scale(-1) ) — одновременное отражение по горизонтали и вертикали.
Вместо scale() можно использовать отдельные функции scaleX() и scaleY() , они отвечают за масштабирование по соответствующим координатам:
- transform: scaleX(-1) — отражение по горизонтали;
- transform: scaleY(-1) — отражение по вертикали;
- transform: scaleX(-1) scaleY(-1) — одновременное отражение по горизонтали и вертикали.
В примере 1 добавляется обычное изображение, а затем оно же, но отражённое по вертикали. Для этого к добавляется класс с именем mirrorY , а в нём используется свойство transform с функцией scaleY(-1) .
Похожие публикации:
- Как прижать блок к верху css
- Как прикрепить блок к низу страницы css
- Как прописать путь к css
- Как работать в css html