Как двигать объекты в css

Как в CSS двигать div со всем содержимым внутри?

Как в CSS двигать div со всем содержимым внутри? Если создать div , а внутри например форму, то при перемещении div двигается только сам div , но не то что внутри. Как двигать div вместе с содержимым? Вот HTML, а вот CSS.

Отслеживать
3,778 2 2 золотых знака 15 15 серебряных знаков 35 35 бронзовых знаков
задан 5 фев 2019 в 8:13
user245380 user245380
Где ваш волшебный код?
5 фев 2019 в 8:15

вот HTML pastebin.com/vxgH3kvA вот CSS pastebin.com/n2MVXeyu. там серый div идет как основной который нужно двигать что бы со всем содержимым.

– user245380
5 фев 2019 в 8:29
Код необходимо выкладывать в вопрос.
5 фев 2019 в 8:30

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Добавьте родительскому div , который будете двигать position отличный от static в зависимости от ситуации:

position: relative; 

position: absolute; 

position: fixed; 

p.s. без примеров кода, можно строить только догадки относительно ответа на ваш вопрос.

Отслеживать
3,778 2 2 золотых знака 15 15 серебряных знаков 35 35 бронзовых знаков
ответ дан 5 фев 2019 в 8:18
9,323 3 3 золотых знака 29 29 серебряных знаков 57 57 бронзовых знаков

Родителю поставить position:relative, потомку поставить position:absolute

Отслеживать
ответ дан 5 фев 2019 в 9:58
Amyr Chelokov Amyr Chelokov
57 7 7 бронзовых знаков

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

2D трансформации. Вращение — CSS: Transform (трансформация объектов)

Вращение объекта на странице — без преувеличения одна из самых полезных функций при разработке анимаций и не только. Этот эффект, будучи простым в понимании, содержит некоторые хитрости, о которых не стоит забывать во время разработки шаблона.

Вращение объекта достигается путём использования функции rotate() свойства transform . В отличие от функции перемещения, вращение не может быть описано пикселями, процентами и другими привычными единицами измерения. Для вращения объекта используются специальные «угловые» единицы, среди которых:

• deg — Градусы. Знакомая многим единица измерения, по которой можно указать, на какой угол повернуть объект относительно его начального положения .
• grad — Градианы. Отличительной особенностью такой единицы является количество град на один квадрант — 100. То есть полный круг описывается в 400 град.
• rad — Радианы. Мера, при которой за одну единицу принимается угол дуги, длина которой равна радиусу окружности.
• turn — Оборот. Количество оборотов окружности, где единица равна одному полному обороту.

Не пугайтесь этих единиц, если вы с ними не знакомы. Для большинства действий нет необходимости использовать их все, при этом в каждой единице есть свои плюсы, которые помогут выразительнее использовать функцию rotate() . Для удобства, в этом курсе мы будем использовать только привычные градусы.

Важно: для вращения объекта по часовой стрелке используются положительные значения функции rotate()

Взгляните на наложение элементов. Изменив положение в пространстве, они не стали занимать «особое» положение в потоке документов. Для потока с этими элементами ничего и не случалось. То место, в котором они находились до трансформации всё так же зарезервировано и не занимается другими элементами. Это же пространство так же не изменяется вне зависимости от значений свойства transform . Такое поведение обеспечивает корректность отображения страницы браузерами на случай, если они не поддерживают свойство transform .

Как и с перемещением, функция rotate() не является единственной функцией для поворота элемента. Существует еще несколько:

• rotateX()
• rotateY()
• rotateZ()

Про rotateZ() и похожие функции будет подробнее рассказано в темах, посвящённых 3D трансформациям. Работа двух других функций в двумерной области может поначалу запутать. Как это вращать объект только по одной оси? Ответ на этот вопрос будет ближе к концу урока. А сейчас стоит понять, как именно вращаются элементы и можно ли управлять точкой, вокруг которой и произойдёт вращение.

Точка вращения

Если вы попробуете вращать любой HTML-элемент на странице, то cможете заметить, что браузер за точку вращения устанавливает центр элемента. Именно вокруг этой точки и происходит всё вращение. Это позволяет не выходить объекту за пределы своего изначального положения и является самым интуитивным способом. Скорее всего, мысленно, вы сможете перевернуть объект на 90 градусов по часовой стрелке и, еще до трансформации, определить конечный результат преобразования.

В следующих примерах ось вращения будет обозначена тёмной точкой в квадрате. Следите за тем, как вращается элемент, но не поддавайтесь гипнозу 🙂

Используя CSS мы можем произвольно изменять точку, вокруг которой будет происходить вращение. Для этого используется свойство transform-origin , оно может принимать от одного до трёх значений одновременно. Третье значение отвечает за ось z, и к ней мы вернёмся во время изучения 3D трансформаций. Поведение при указании одного или двух значений следующее:

• Одно значение: устанавливается точка по оси x. Значение по оси y будет равняться center
• Два значения: устанавливаются точки по оси x и по оси y

В качестве значений могут выступать проценты или специальные ключевые слова top, right, bottom, left, center. Добавим для квадрата из примера выше в качестве точки вращения левый верхний угол. Этого можно добиться двумя способами:

• transform-origin: left top
• transform-origin: 0% 0%

При использовании процентных значений можно добиться интересных эффектов, так как можно не привязываться к конкретному краю объекта, а разместить точку в любом месте самого объекта.

Обратите внимание на последний пример. В нём точка вращения вынесена за пределы самого объекта. Таким образом создается эффект, что объект перемещается не по определённой точке вращения, а вокруг неё. Попробуйте изменять значения, чтобы убедиться в понимании точки вращения объекта.

Вращение по одной оси

В самом начале урока говорилось о том, что существуют еще две функции для вращения 2D объектов:

Как можно вращать двумерный объект по одной из осей? Добавим вращение по оси x на 360 градусов c точкой вращения по центру

Для большей наглядности на объекте используется градиент. Во время изучения трехмерных объектов станет понятнее, что происходит с двумерным объектом. Он действительно крутится только по одной оси. В данном случае наклоняясь вперёд и проходя под осью x. Это похоже на качели, которые раскручивают «солнышком», только мы не видим глубину объекта. Вращение по оси y работает по тому же принципу, только визуально объект будет вращаться вокруг вертикальной оси.

У двумерных объектов нет глубины, и именно поэтому визуально происходит скорее деформация объекта, чем его вращение. Такой принцип можно использовать при создании небольших анимаций. Например, используя :hover на кнопке можно изменить угол её положения относительно пользователя. Похожим приёмом можно добиться эффекта трехмерности в двумерной плоскости. Подробнее об анимации будет в следующих курсах, но этот пример уже можно взять на вооружение для создания простых анимаций интерфейсов.

Дополнительное задание

Используя последний пример с кнопкой, попробуйте изученные свойства трансформации, чтобы увидеть, как будет вести себя объект при наведении. Скорость трансформации можно изменить в свойстве transition .

Полезные ссылки

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Наши выпускники работают в компаниях:

transform

CSS-свойство transform позволяет вам поворачивать, масштабировать, наклонять или сдвигать элемент. Оно модифицирует координатное пространство для CSS визуальной форматируемой модели.

Интерактивный пример

Если свойство имеет значение, отличное от none , будет создан контекст наложения. В этом случае, элемент будет действовать как содержащий блок для любых элементов position: fixed; или position: absolute; которые он содержит.

Предупреждение: Только трансформируемый элемент может быть transform . Т.е. все элементы, шаблоны которых регулируются блочной моделью CSS, кроме : неизменяемые инлайновые блоки, блоки таблица-колонка, и блоки таблица-колонка-группа (en-US) .

Синтаксис

/* Значения ключевым словом*/ transform: none; /* Значения функций */ transform: matrix(1, 2, 3, 4, 5, 6); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5turn); transform: rotate3d(1, 2, 3, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: translate(12px, 50%); transform: translate3d(12px, 50%, 3em); transform: translateX(2em); transform: translateY(3in); transform: translateZ(2px); transform: scale(2, 0.5); transform: scale3d(2.5, 1.2, 0.3); transform: scaleX(2); transform: scaleY(0.5); transform: scaleZ(0.3); transform: skew(30deg, 20deg); transform: skewX(30deg); transform: skewY(1.07rad); /* Мультифункциональные значения */ transform: translateX(10px) rotate(10deg) translateY(5px); transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg); /* Глобальные значения */ transform: inherit; transform: initial; transform: unset; 

Свойство transform может быть указано как значение ключевого слова none или как одно или более значений .

Значения

Одна или более применяемых функций CSS-трансформации (en-US) . Функции трансформации умножаются в порядке слева направо, что означает, что составное трансформирование эффективнее применять в порядке справа налево.

Указывает, что трансформация не должна применяться.

Формальный синтаксис

transform =
none | (en-US)

=
(en-US) + (en-US)

Если perspective() (en-US) является одним из мультифункциональных значений, оно должно быть указано первым.

Введение в 3D: основы Three.js

Cложность Web меняется ежедневно, и его возможности растут так же быстро, особенно с 3D-рендерингом. Кто только начинает вливаться в тему 3D — добро пожаловать под кат.

Зайдем издалека

WebGL – это программная библиотека для JavaScript, которая позволяет создавать 3D графику, функционирующую в браузерах. Данная библиотека основана на архитектуре библиотеки OpenGL. WebGL использует язык программирования шейдеров GLSL, который имеет С-подобный синтаксис. WebGL интересен тем, что код моделируется непосредственно в браузере. Для этого WebGL использует объект canvas, который был введен в HTML5.

Работа с WebGL, и с шейдерами в частности, — это довольно трудоемкий процесс. В процессе разработки необходимо описать каждую точку, линию, грань и так далее. Чтобы все это визуализировать, нам необходимо прописать довольно объемный кусок кода. Для повышения скорости разработки, была разработана библиотека Three.js.

Three.js – это библиотека JavaScript, содержащая набор готовых классов для создания и отображения интерактивной 3D графики в WebGL.

Three.js для WebGL — это то же самое, что jQuery для JavaScript. Библиотека предлагает декларативный синтаксис, и абстрагирует от головных болей связанных с 3D в браузере. Давайте проведем общий обзор и посмотрим, как начать работу, если вы новичок в мире 3D.

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

Библиотека Three.js, как уже упоминалось, облегчает работу с WebGL. При использовании Three.js отпадает необходимость в написании шейдеров (но возможность остается), и появляется возможность оперировать привычными понятиями.

Над библиотекой работает большое количество разработчиков. Главным идеологом и разработчиком является Ricardo Cobello, известный под творческим псевдонимом Mr.Doob.

Моделирование графики с использованием Three.js можно сравнить со съемочной площадкой, так как у нас есть возможность оперировать такими понятиями как сцена, свет, камера, объекты и их материалы.

Три, так называемых, кита Three.js включают в себя:

• Scene — своеобразная платформа, где размещаются все объекты, которые мы создаем;
• Camera — по сути — это “глаз”, который будет направлен на сцену. Камера снимает и отображает объекты, которые расположены на сцене;
• Renderer — визуализатор, который позволяет показывать сцену, снятую камерой.

• Perspective Camera
• Stereo Camera
• Orthographic Camera
• Cube Camera

Perspective Camera

Это наиболее распространенный режим проекции, используемый для рендеринга 3D-сцены.

Перспективная камера предназначена для имитации того, что видит человеческий глаз. Камера воспринимает все объекты в перспективной проекции, то есть: чем дальше находится объект от нас, тем он кажется меньше.

Перспективная камера принимает 4 аргумента:

• FOV или Field Of View (поле/угол зрения) — определяет угол, который вы можете видеть вокруг центра камеры.
• Aspect ratio — пропорция, или, соотношение ширины к высоте экрана. При больших значениях поля зрения видимый размер объектов быстро уменьшается на удалении. При маленьких значениях, наоборот, видимый размер объектов слабо зависит от расстояния.
• Near & Far — минимальное и максимальное расстояние от камеры, которое попадает в рендеринг. Так, очень далекие точки не будут отрисовываться вообще, как и точки, которые находятся очень близко.

Orthographic Camera

В этом режиме проецирования размер объекта в отображаемом изображении остается постоянным, независимо от его расстояния от камеры. То есть, это камера, удаленная на бесконечное расстояние от объектов.

В данном случае все перпендикулярные прямые остаются перпендикулярными, все параллельные — параллельными. Если мы будем двигать камеру, прямые и объекты не будут искажаться.

Это может быть полезным при отображении 2D сцен и элементов UI.

Освещение

Без освещения на сцене, будет складываться впечатление, что вы находитесь в темной комнате. Помимо этого, с помощью освещения сцене можно придать большую реалистичность. Технически, каждому освещению можно задать цвет.

• Ambient Light — фоновое освещение, которое используется для освещения всех объектов сцены одинаково; не может быть использован для создания теней, так как не имеет направления.
• Directional Light — свет, который излучается в определенном направлении. Этот свет будет вести себя так, как если бы он был бесконечно далеко, а лучи, излучаемые из него, были параллельны; данное освещение может отбрасывать тени, так как направлено оно на конкретный объект.
• Point Light — свет, который излучается из одной точки во всех направлениях. Обычный случай использования такого освещения это повторение освещения от простой лампочки (без светильника).
• Spot Light — данный свет излучается из одной точки в одном направлении, вдоль конуса, расширяемого по мере удаления от источника света.

Создание объектов на сцене

Объект, создаваемый на сцене, называется Mesh.

Mesh — это класс, представляющий объекты на основе треугольной полигональной сетки.

Этот класс принимает 2 аргумента:

• Geometry — описывает форму (положения вершин, грани, радиус и т.д)
• Material — описывает внешний вид объектов (цвет, текстура, прозрачность и т.д.)

Первым делом переходим на сайт three.js, скачиваем последнюю версию библиотеки. Затем подключаем библиотеку в секции head или в начало секции body нашего документа, и все готово:

     body < margin: 0; >canvas    

Далее, чтобы мы могли отобразить создаваемый объект, необходимо создать сцену, добавить камеру и настроить рендер.

var scene = new THREE.Scene();

Добавляем перспективную камеру:

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

Камера принимает на себя 4 параметра, о которых было упомянуто выше:

• угол зрения или FOV, в нашем случае это стандартный угол 75;
• второй параметр — соотношение сторон или aspect ratio;
• третьим и четвертым параметром идут минимальное и максимальное расстояние от камеры, которое попадет в рендеринг.

var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );

Что мы сделали: сначала создали объект рендера, затем установили его размер в соответствии с размером видимой области и, наконец, добавили его на страницу, чтобы создать пустой элемент canvas, с которым будем работать.

После создания рендера указываем, где нужно отобразить тег canvas. В нашем случае мы добавили его в тег body.

Для создания самого куба сначала задаем геометрию:

var geometry = new THREE.BoxGeometry( 10, 10, 10);

Куб создается при помощи класса BoxGeometry. Это класс, который содержит в себе вершины и грани куба. Передаем размеры:

• width: ширина куба, размер сторон по оси X
• height: высота куба, т.е. размер сторон по оси Y
• depth: глубина куба, т.е. размер сторон по оси Z

var material = new THREE.MeshBasicMaterial( < color: 0x00ff00 >);

В нашем случае задан MeshBasicMaterial и передан параметр цвета 0x00ff00, т.е. зеленый цвет. Этот материал в принципе используется для придания фигуре однородного цвета. Минус в том, что у фигуры пропадает глубина. Но этот материал вполне пригодиться при отрисовке каркасов при помощи параметра .

var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 25;

function render() < requestAnimationFrame( render ); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render( scene, camera ); >render();

var geometry = new THREE.SphereGeometry(1, 32, 32);

var material = new THREE.MeshNormalMaterial(); var sphere = new THREE.Mesh( geometry, material ); scene.add( sphere ); camera.position.z = 3;

function render() < requestAnimationFrame( render ); sphere.rotation.x += 0.01; sphere.rotation.y += 0.01; renderer.render( scene, camera ); >render();

var scene = new THREE.Scene(); var spotLight = new THREE.SpotLight(0xeeeece); spotLight.position.set(1000, 1000, 1000); scene.add(spotLight); var spotLight2 = new THREE.SpotLight(0xffffff); spotLight2.position.set( -200, -200, -200); scene.add(spotLight2);

var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );

var material = new THREE.MeshPhongMaterial( < color: 0xdaa520, specular: 0xbcbcbc, >);

var THREE = require('three'); var scene = new THREE.Scene(); . 

import * as THREE from 'three'; const scene = new THREE.Scene(); . 

import < Scene >from 'three'; const scene = new Scene(); .