CSS :: Трансформация
http://belarusweb.net
Основы создания сайтов

CSS :: Трансформация

Трансформация элемента и свойство transform

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

  • translate() – сдвигает элемент на плоскости вдоль осей X и Y;
  • translateX() – сдвигает элемент вдоль оси X;
  • translateY() – сдвигает элемент вдоль оси Y;
  • translateZ() – сдвигает элемент вдоль оси Z;
  • translate3d() – сдвигает элемент в трехмерном пространстве;
  • scale() – масштабирует элемент на плоскости;
  • scaleX() – масштабирует элемент вдоль оси X;
  • scaleY() – масштабирует элемент вдоль оси Y;
  • scaleZ() – масштабирует элемент вдоль оси Z;
  • scale3d() – масштабирует элемент в трехмерном пространстве;
  • rotate() – поворачивает элемент на требуемый угол на плоскости относительно точки трансформации, которая задается свойством transform-origin;
  • rotateX() – поворачивает элемент на требуемый угол относительно оси X;
  • rotateY() – поворачивает элемент на требуемый угол относительно оси Y;
  • rotateZ() – поворачивает элемент на требуемый угол относительно оси Z;
  • rotate3d() – поворачивает элемент в трехмерном пространстве;
  • skew() – наклоняет элемент на заданный угол на плоскости;
  • skewX() – наклоняет элемент вдоль оси X;
  • skewY() – наклоняет элемент вдоль оси Y;
  • matrix() – задает двумерную матрицу преобразований, объединяя несколько функций в одной;
  • matrix3d() – задает трехмерную матрицу преобразований;
  • perspective() – задает перспективу (глубину сцены);
  • none – отменяет эффекты трансформации для данного элемента.

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

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

Функция трансформации translate()

Функция трансформации translate() позволяет сдвигать элемент на плоскости вдоль осей X и Y. В качестве параметров функция может принимать два значения в виде любых допустимых в CSS единиц измерения длины, как положительных, так и отрицательных. Первое значение смещает элемент в горизонтальном направлении вдоль оси X (если значение больше нуля, то элемент сдвигается вправо, а если отрицательное, то влево), а второе предназначено для смещения в вертикальном положении вдоль оси Y (если значение больше нуля, то элемент сдвигается вниз, а если отрицательное, то вверх). Второе значение разрешается не указывать, тогда трансформируемый элемент будет сдвигаться только в горизонтальном направлении вдоль оси X (см. пример №1).

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Функция трансформации translate()</title>
	
	<style>
				
		/* Оформляем родительский div абзацев */
		div{
		width: 550px;
		height: 550px;
		margin: auto;		
		padding: 40px;
		background-color: #DFDFDF;
		border-radius: 5px;
		}

		/* Это общий стиль абзацев */		
		p{
		width: 280px;
		margin: auto;
		margin-top: 20px;		
		padding: 30px;
		background-color: #55aa55;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		color: #F9F9F9;
		}

		/* Это класс 1-го трансформированного абзаца */	
		.p_1{transform: translate(100px);}
		
		/* Это класс 2-го трансформированного абзаца */	
		.p_2{transform: translate(-150px, 150px);}
		
		/* Это класс 3-го трансформированного абзаца */	
		.p_3{transform: translate(30px, -100px);}
				
	</style>
	
</head>
<body>
	
	<div>
		<p>
			Простой абзац.<br>
		</p>
		
		<p class="p_1">
			1-й трансформированный абзац: <br>
			transform: translate(100px)
		</p>
		
		<p class="p_2">
			2-й трансформированный абзац: <br>
			transform: translate(-150px, 150px)
		</p>
		
		<p class="p_3">
			3-й трансформированный абзац: <br>
			transform: translate(30px, -100px)
		</p>
					
	</div>

</body>
</html>

Пример №1. Функция трансформации translate()

Функция трансформации scale()

Функция трансформации scale() дает возможность масштабирования элемента на плоскости, принимая в качестве параметров два числа, первое из которых масштабирует элемент в горизонтальном направлении, а второе - по вертикали. Значение параметра большее единицы (например, 1.7), приводит к увеличению масштаба элемента, меньшее единицы (например, 0.8) - к уменьшению масштаба. Если же значение еще и меньше нуля, то элемент не только масштабируется, но также и зеркально отражается относительно соответствующей оси (см. пример №2). Отметим, что значение параметра равное единице не изменяет масштаб элемента.

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

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Функция трансформации scale()</title>
	
	<style>
				
		/* Оформляем родительский div абзацев */
		div{
		width: 550px;
		height: 550px;
		margin: auto;		
		padding: 40px;
		background-color: #DFDFDF;
		border-radius: 5px;
		}
		
		/* Это общий стиль абзацев */		
		p{
		width: 240px;
		margin: auto;
		margin-top: 20px;		
		padding: 30px;
		background-color: #55aa55;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		color: #F9F9F9;
		}

		/* Это класс 1-го трансформированного абзаца */	
		.p_1{transform: scale(1.5, 0.8);}
		
		/* Это класс 2-го трансформированного абзаца */	
		.p_2{transform: scale(-1.3, 1.3);}
		
		/* Это класс 3-го трансформированного абзаца */	
		.p_3{transform: scale(-0.9);}
				
	</style>
	
</head>
<body>
	
	<div>
		<p>
			Простой абзац.<br>
		</p>
		
		<p class="p_1">
			1-й трансформированный абзац: <br>
			transform: scale(1.5, 0.8)
		</p>
		
		<p class="p_2">
			2-й трансформированный абзац: <br>
			transform: scale(-1.3, 1.3)
		</p>
		
		<p class="p_3">
			3-й трансформированный абзац: <br>
			transform: scale(-0.9)
		</p>
					
	</div>

</body>
</html>

Пример №2. Функция трансформации scale()

Функция трансформации rotate()

Функция трансформации rotate() позволяет поворачивать элемент на плоскости вокруг точки трансформации на требуемый угол (см. пример №3). Точка трансформации по умолчанию располагается в центре элемента и может быть изменена при помощи свойства transform-origin (см. ниже). В качестве значений функция rotate() принимает все доступные в CSS единицы измерения углов: градусы (например, rotate(30deg)), грады (например, rotate(100grad)), радианы (например, rotate(-3.15rad)) или же просто обороты (например, rotate(2.5turn)). При этом положительные значения угла приводят к повороту элемента по часовой стрелке, отрицательные - против.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Функция трансформации rotate()</title>
	
	<style>
				
		/* Оформляем родительский div абзацев */
		div{
		width: 550px;
		height: 550px;
		margin: auto;		
		padding: 40px;
		background-color: #DFDFDF;
		border-radius: 5px;
		}
		
		/* Это общий стиль абзацев */		
		p{
		width: 240px;
		margin: auto;
		margin-top: 20px;		
		padding: 30px;
		background-color: #55aa55;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		color: #F9F9F9;
		}

		/* Это класс 1-го трансформированного абзаца */	
		.p_1{transform: rotate(-10.5deg);}
		
		/* Это класс 2-го трансформированного абзаца */	
		.p_2{transform: rotate(0.11rad);}
		
		/* Это класс 3-го трансформированного абзаца */	
		.p_3{transform: rotate(10grad);}

		/* Это класс 4-го трансформированного абзаца */	
		.p_4{transform: rotate(-0.5turn);}				
	</style>
	
</head>
<body>
	
	<div>
		<p>
			Простой абзац.<br>
		</p>
		
		<p class="p_1">
			1-й трансформированный абзац: <br>
			transform: rotate(-10.5deg)
		</p>
		
		<p class="p_2">
			2-й трансформированный абзац: <br>
			transform: rotate(0.11rad)
		</p>
		
		<p class="p_3">
			3-й трансформированный абзац: <br>
			transform: rotate(10grad)
		</p>
		
		<p class="p_4">
			4-й трансформированный абзац: <br>
			transform: rotate(-0.5turn)
		</p>		
					
	</div>

</body>
</html>

Пример №3. Функция трансформации rotate()

Функция трансформации skew()

Функция трансформации skew() используется для наклона (деформации сдвига) элемента на плоскости вдоль осей X и Y, принимая в качестве параметров значения углов: первое значение задает угол наклона элемента в горизонтальном направлении (если значение больше нуля, то элемент наклоняется влево, а если отрицательное, то вправо), второе значение задает угол наклона элемента по вертикали (если значение больше нуля, то элемент наклоняется вниз, а если отрицательное, то вверх). Опять же, разрешается использовать любые доступные в CSS единицы измерения углов: градусы, грады, радианы или же просто обороты (например, skew(2.5turn, -30deg)). При этом вместо нулевых значений допустимо использовать просто нуль, а второе значение можно не указывать вообще, тогда трансформируемый элемент будет наклоняться только в горизонтальном направлении вдоль оси X (см. пример №4).

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Функция трансформации skew()</title>
	
	<style>
				
		/* Оформляем родительский div абзацев */
		div{
		width: 550px;
		height: 550px;
		margin: auto;		
		padding: 40px;
		background-color: #DFDFDF;
		border-radius: 5px;
		}
		
		/* Это общий стиль абзацев */		
		p{
		width: 240px;
		margin: auto;
		margin-top: 20px;		
		padding: 30px;
		background-color: #55aa55;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		color: #F9F9F9;
		}

		/* Это класс 1-го трансформируемого абзаца */	
		.p_1{transform: skew(20deg);}
		
		/* Это класс 2-го трансформируемого абзаца */	
		.p_2{transform: skew(-0.5rad);}
		
		/* Это класс 3-го трансформируемого абзаца */	
		.p_3{transform: skew(0, -0.1rad);}
				
		/* Это класс 4-го трансформируемого абзаца */	
		.p_4{transform: skew(-0.1turn, 10grad);}					
	</style>
	
</head>
<body>
	
	<div>
		<p>
			Простой абзац.<br>
		</p>
		
		<p class="p_1">
			1-й трансформированный абзац: <br>
			transform: skew(20deg)
		</p>
		
		<p class="p_2">
			2-й трансформированный абзац: <br>
			transform: skew(-0.5rad)
		</p>
		
		<p class="p_3">
			3-й трансформированный абзац: <br>
			transform: skew(0, -0.1rad)
		</p>
		
		<p class="p_4">
			4-й трансформированный абзац: <br>
			transform: skew(-0.1turn, 10grad)
		</p>		
					
	</div>

</body>
</html>

Пример №4. Функция трансформации skew()

Функция трансформации matrix()

Функция трансформации matrix() позволяет трансформировать элементы, совмещая в себе возможности сразу нескольких функций трансформации (см. пример №5). В качестве параметров она принимает через запятую шесть значений:

  • scaleX – изменяет масштаб элемента по горизонтали: значение от 0 до 1 уменьшает (сжимает) элемент вдоль оси X, больше 1 - увеличивает (расширяет) его;
  • skewY – наклоняет элемент по вертикали (сдвиг вертикальных сторон элемента друг относительно друга вдоль оси Y): если значение больше нуля, то элемент наклоняется вверх, а если отрицательное, то вниз;
  • skewX – наклоняет элемент по горизонтали (сдвиг горизонтальных сторон элемента друг относительно друга вдоль оси X): если значение больше нуля, то элемент наклоняется влево, а если отрицательное, то вправо;
  • scaleY – изменяет масштаб элемента по вертикали: значение от 0 до 1 уменьшает (сжимает) элемент вдоль оси Y, больше 1 - увеличивает (расширяет) его;
  • translateX – смещает элемент на указанное число пикселей по горизонтали: если значение больше нуля, то элемент сдвигается вправо, а если отрицательное, то влево;
  • translateY – смещает элемент на указанное число пикселей по вертикали: если значение больше нуля, то элемент сдвигается вниз (опускается), а если отрицательное, то вверх (поднимается).
HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Функция трансформации matrix()</title>
	
	<style>
				
		/* Оформляем родительский div абзацев */
		div{
		width: 550px;
		height: 550px;
		margin: auto;		
		padding: 40px;
		background-color: #DFDFDF;
		border-radius: 5px;
		}
		
		/* Это общий стиль абзацев */		
		p{
		width: 320px;
		margin: auto;
		margin-top: 20px;		
		padding: 30px;
		background-color: #55aa55;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		color: #F9F9F9;
		}

		/* Это класс 1-го трансформируемого абзаца */	
		.p_1{transform: matrix(1.2,0,0,1.2,0,0);}
		
		/* Это класс 2-го трансформируемого абзаца */	
		.p_2{transform: matrix(1,0.14,0,1,0,0);}
		
		/* Это класс 3-го трансформируемого абзаца */	
		.p_3{transform: matrix(1,0,0,1,70,0);}
				
		/* Это класс 4-го трансформируемого абзаца */	
		.p_4{transform: matrix(1.1,-0.09,0,1.5,-20,30);}	
		
	</style>
	
</head>
<body>
	
	<div>
		<p>
			Простой абзац.<br>
		</p>
		
		<p class="p_1">
			1-й трансформированный абзац: <br>
			transform: matrix(1.2, 0, 0, 1.2, 0, 0)
		</p>
		
		<p class="p_2">
			2-й трансформированный абзац: <br>
			transform: matrix(1, 0.14, 0, 1, 0, 0)
		</p>
		
		<p class="p_3">
			3-й трансформированный абзац: <br>
			transform: matrix(1, 0, 0, 1, 70, 0)
		</p>
		
		<p class="p_4">
			4-й трансформированный абзац: <br>
			transform: matrix(1.1, -0.09, 0, 1.5, -20, 30)
		</p>		
					
	</div>

</body>
</html>

Пример №5. Функция трансформации matrix()

Функция perspective()

Рассмотренные выше примеры функций позволяют трансформировать элементы на плоскости. Однако в CSS имеются возможности осуществлять и 3D-трансформации, добавляя третье измерение к веб-страницам.

Одной из таких возможностей является функция perspective(), которая задает глубину просмотра (3d-перспективу), т.е. расстояние по оси Z от плоскости экрана до точки сходимости линий. В результате создается впечатление приближения либо отдаления элемента от зрителя (см. рис №6).

Рис. №6. Зависимость масштабирования вдоль оси Z от 3d-перспективы

Масштабирование элемента пропорционально d/(d–z), где d (значение перспективы) - это расстояние от плоскости экрана до предполагаемого положения глаз зрителя, а Z - координата желаемого расположения плоскости элемента на оси Z, направленной к пользователю. Так на верхнем рисунке, чтобы создать для пользователя впечатление, что исходный круг (изображен сплошным контуром) на экране стал ближе к нему в два раза (круг изображен пунктиром), его размер также необходимо увеличить в два раза (голубой круг), т.к. d/(d–d/2)=2 (здесь z=d/2). На нижнем рисунке изображена ситуация, когда у пользователя создается впечатление, что исходный круг на экране удалился от него на половину расстояния от пользователя до экрана. Для этого потребовалось уменьшить размер исходного круга на треть, т.к. d/(d–(-d/2))=d/(d+d/2)=2/3 (здесь z=-d/2).

В качестве параметра функция perspective() принимает любые доступные в CSS единицы измерения длины (если не указаны, то по умолчанию будут использованы пиксели). При этом чем больше будет положительное значение, тем менее будет выражен эффект перспективы (элемент будет все больше удаляться от зрителя), и наоборот, при уменьшении положительного значения эффект перспективы становится более выраженным (элемент будет все больше приближаться к зрителю). Что касается отрицательных значений и нуля, то они отменяют действие перспективы (см. пример №7). Однако следует иметь в виду, что если перспективу не задавать, то будут отсутствовать и эффекты трансформации в трехмерном пространстве, например, повороты элемента вокруг осей X и Y или его перемещение вдоль оси Z.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Функция трансформации perspective()</title>
	
	<style>
				
		/* Оформляем родительский div абзацев */
		div{
		width: 550px;
		height: 550px;
		margin: auto;		
		padding: 40px;
		background-color: #DFDFDF;
		border-radius: 5px;
		}
		
		/* Это общий стиль абзацев */		
		p{
		width: 320px;
		margin: auto;
		margin-top: 20px;		
		padding: 30px;
		background-color: #55aa55;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		color: #F9F9F9;
		}

		/* Это класс 1-го трансформируемого абзаца */	
		.p_1{transform: perspective(0px) rotateX(20deg);}
		
		/* Это класс 2-го трансформируемого абзаца */	
		.p_2{transform: perspective(400px) rotateX(20deg);}
		
		/* Это класс 3-го трансформируемого абзаца */	
		.p_3{transform: perspective(200px) rotateX(20deg);}
				
		/* Это класс 4-го трансформируемого абзаца */	
		.p_4{transform: perspective(100px) rotateX(20deg);}	
		
	</style>
	
</head>
<body>
	
	<div>
		<p>
			Простой абзац.<br>
		</p>
		
		<p class="p_1">
			1-й трансформированный абзац: <br>
			transform: perspective(0px) rotateX(20deg)
		</p>
		
		<p class="p_2">
			2-й трансформированный абзац: <br>
			transform: perspective(400px) rotateX(20deg)
		</p>
		
		<p class="p_3">
			3-й трансформированный абзац: <br>
			transform: perspective(200px) rotateX(20deg)
		</p>
		
		<p class="p_4">
			4-й трансформированный абзац: <br>
			transform: perspective(100px) rotateX(20deg)
		</p>		
					
	</div>

</body>
</html>

Пример №7. Функция трансформации perspective()

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

css-свойство perspective

Когда 3D-перспектива задается с помощью функции perspective(), 3D-пространство активируется только для одного элемента. Если же требуется обеспечить одинаковую перспективу для всех дочерних элементов родителя, то можно использовать специальное ненаследуемое css-свойство perspective, которое активирует 3D-пространство внутри элемента-родителя и будет применено ко всем дочерним элементам сразу. В результате такой манипуляции отпадает необходимость использовать функцию для каждого дочернего элемента. При этом в случае необходимости для конкретных элементов всегда можно будет использовать функцию perspective(), переопределив значение свойства (см. пример №8).

Что касается значений, то свойство perspective может принимать:

  • длина – любые доступные в CSS единицы измерения длины (если не указаны, то по умолчанию будут использованы пиксели), при этом чем больше положительное значение, тем менее выражен эффект перспективы, и наоборот; отрицательные значения и нуль отменяют действие перспективы;
  • none – отменяет действие перспективы (используется по умолчанию).
HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Свойство perspective</title>
	
	<style>
				
		/* Оформляем родительский div абзацев */
		div{
		width: 550px;
		height: 550px;
		margin: auto;		
		padding: 40px;
		background-color: #DFDFDF;
		border-radius: 5px;
		perspective: 300px;
		}
		
		/* Это общий стиль абзацев */		
		p{
		width: 320px;
		margin: auto;
		margin-top: 20px;		
		padding: 30px;
		background-color: #55aa55;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		color: #F9F9F9;
		}

		/* Это класс 1-го трансформируемого абзаца */	
		.p_1{transform: rotateX(0.3rad);}
		
		/* Это класс 2-го трансформируемого абзаца */	
		.p_2{transform: perspective(100px) rotateX(0.3rad);}	
		
	</style>
	
</head>
<body>
		
	<div>
		<p>
			Я простой абзац, меня никто не трансформировал. 
		</p>
		
		<p class="p_1">
			Я дочерний элемент div'а, поэтому ко мне 
			применима перспектива (perspective: 300px;) 
			и заметен поворот вокруг оси Х, т.к.
			transform: rotateХ(0.3rad).
		</p>
		
		<p class="p_2">
			Моя перспектива была переопределена функцией 
			transform: perspective(100px) rotateX(0.3rad).
		</p>
			
	</div>

</body>
</html>

Пример №8. Использование css-свойства perspective

Обязательно поэкспериментируйте с данным примером, попробовав различные значения перспективы.

css-свойство perspective-origin

По умолчанию точка сходимости линий (т.е. точка расположения глаз зрителя при взгляде на экран) при использовании свойства perspective находится на оси, проходящей через центр элемента перпендикулярно плоскости экрана (см. рис. №9). Однако эту точку можно смещать, изменяя ее координаты X и Y. Делается это при помощи ненаследуемого css-свойства perspective-origin, которое должно использоваться совместно с perspective для родительского блока и свойством transform для дочернего элемента.

Рис. №9. Пример смещения точки сходимости линий при использовании перспективы

В качестве значений perspective-origin принимает через пробел координаты X и Y точки сходимости линий (см. пример №10). Для них разрешается использовать:

  • для координаты X – любые доступные в CSS единицы измерения длины, проценты (по умолчанию X=50%), а также ключевые слова left (эквивалентно 0% по оси X), center (эквивалентно 50% по оси X) или right (эквивалентно 100% по оси X);
  • для координаты Y – любые доступные в CSS единицы измерения длины, проценты (по умолчанию Y=50%), а также ключевые слова top (эквивалентно 0% по оси Y), center (эквивалентно 50% по оси Y) или bottom (эквивалентно 100% по оси Y).

Отметим, что за начало координат при расчетах принимается левый верхний угол элемента, а проценты рассчитываются относительно его ширины. При этом разрешается использовать не только положительные, но и отрицательные значения координат. Кроме того, если передать свойству perspective-origin только одно значение, то оно будет считаться координатой X, а для координаты Y будет использовано значение по умолчанию.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Свойство perspective-origin</title>
	
	<style>
				
		/* Оформляем родительские div'ы абзацев */
		div{
		width: 550px;
		margin: auto;		
		margin-top: 20px;
		padding: 20px;
		background-color: #DFDFDF;
		border-radius: 5px;
		perspective: 250px;
		}
		
		/* Это общий стиль абзацев */		
		p{
		width: 320px;
		margin: auto;
		padding: 20px;
		background-color: #55aa55;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		color: #F9F9F9;
		transform: rotateX(25deg);
		}


		/* Это класс 1-го родительского div'а */	
		.div_1{
		perspective-origin: 50% 50%;			
		}
		
		/* Это класс 2-го родительского div'а */	
		.div_2{
		perspective-origin: 50% 100px;
		}
		
		/* Это класс 3-го родительского div'а */	
		.div_3{
		perspective-origin: 50% 200px;
		}
		
		/* Это класс 4-го родительского div'а */	
		.div_4{
		perspective-origin: 50% 400px;
		}		
		
	</style>
	
</head>
<body>
	
	<div class="div_1">
		<p>
			Дочерний элемент 1-го div'а:<br>
			perspective-origin: 50% 50%
		</p>
	</div>	
	
	<div class="div_2">
		<p>
			Дочерний элемент 2-го div'а:<br>
			perspective-origin: 50% 100px.	
		</p>
	</div>
	
	<div class="div_3">
		<p>
			Дочерний элемент 3-го div'а:<br>
			perspective-origin: 50% 200px.
		</p>
	</div>
	
	<div class="div_4">
		<p>
			Дочерний элемент 4-го div'а:<br>
			perspective-origin: 50% 400px.
		</p>
	</div>

</body>
</html>

Пример №10. Пример использования css-свойства perspective-origin

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

css-свойство transform-origin

С расположением точки сходимости линий и возможностью ее смещения в плоскости, которая проходит параллельно экрану через эту точку, мы разобрались. Однако на результат трансформации влияет также и расположение еще одной важной точки, называемой центром (точкой) трансформации. По умолчанию трансформация элемента происходит относительно точки трансформации, которая находится в плоскости экрана в центре трансформируемого элемента (см. рис №11). Однако эту точку можно смещать, изменяя ее координаты X, Y и Z (координаты отсчитываются от левого верхнего угла элемента). Делается это при помощи ненаследуемого css-свойства transform-origin, которое используется совместно с transform.

Рис. №11. Расположение центра трансформации по умолчанию

В качестве значений transform-origin принимает через пробел координаты X, Y и Z центра трансформации (см. пример №12). Для них разрешается использовать:

  • для координаты X – любые доступные в CSS единицы измерения длины, проценты (по умолчанию X=50%), а также ключевые слова left (эквивалентно 0% по оси X), center (эквивалентно 50% по оси X) или right (эквивалентно 100% по оси X);
  • для координаты Y – любые доступные в CSS единицы измерения длины, проценты (по умолчанию Y=50%), а также ключевые слова top (эквивалентно 0% по оси Y), center (эквивалентно 50% по оси Y) или bottom (эквивалентно 100% по оси Y).
  • для координаты Z – любые доступные в CSS единицы измерения длины, исключая проценты и ключевые слова.

Опять же, за начало координат при расчетах принимается левый верхний угол элемента, а проценты рассчитываются относительно его размеров. При этом разрешается использовать не только положительные, но и отрицательные значения координат. Кроме того, если передать свойству transform-origin только одно значение, то оно будет считаться координатой X, если два, то X и Y (соответственно неуказанные координаты примут значения по умолчанию).

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Свойство transform-origin</title>
	
	<style>
				
		/* Оформляем родительский div абзацев */
		div{
		width: 550px;
		height: 550px;
		margin: auto;		
		padding: 40px;
		background-color: #DFDFDF;
		border-radius: 5px;
		}
		
		/* Это общий стиль абзацев */		
		p{
		width: 320px;
		margin: auto;
		margin-top: 20px;
		padding: 20px;
		background-color: #55aa55;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		color: #F9F9F9;
		}


		/* Это класс 1-го трансформируемого абзаца */	
		.p_1{
		transform: perspective(300px) rotateX(0.3rad);
		}
		
		/* Это класс 2-го трансформируемого абзаца */	
		.p_2{
		transform-origin: 0% 0px;
		transform: perspective(300px) rotateX(0.3rad);
		}
		
		/* Это класс 3-го трансформируемого абзаца */	
		.p_3{
		transform-origin: -150% 130% 0px;
		transform: perspective(300px) rotateX(0.3rad);
		}
				
		/* Это класс 4-го трансформируемого абзаца */	
		.p_4{
		transform-origin: 150% -130% 100px;
		transform: perspective(300px) rotateX(0.3rad);
		}			
		
	</style>
	
</head>
<body>
		
	<div>
		<p>
			Простой абзац. 
		</p>
		
		<p class="p_1">
			1-й трансформированный абзац: <br>
			transform-origin: 50% 50%
		</p>
		
		<p class="p_2">
			2-й трансформированный абзац: <br>
			transform-origin: 0% 0px
		</p>
		
		<p class="p_3">
			3-й трансформированный абзац: <br>
			transform-origin: -150% 130% 0px
		</p>
		
		<p class="p_4">
			4-й трансформированный абзац: <br>
			transform-origin: 150% -130% 100px
		</p> 
	</div>

</body>
</html>

Пример №12. Пример использования css-свойства transform-origin

Обязательно поэкспериментируйте с данным примером, попробовав различные варианты координат центра трансформации. Используйте различные единицы измерения, а также ключевые слова. Не забывайте, что для координаты Z нельзя использовать проценты и ключевые слова.

css-свойство transform-style

Когда мы трансформируем родительский элемент в трехмерном пространстве, то все дочерние элементы по умолчанию отрисовываются в двумерном пространстве своего родителя, т.е. располагаются в его плоскости и могут без проблем подвергаться 2D-трансформациям. Но если мы попробуем применить к дочерним элементам 3D-трансформации, то результат нас не очень обрадует, т.к. точки трехмерного пространства все равно будут спроецированы на плоскость родительского элемента и мы получим совсем не то, что ожидали (см. пример №13). Для решения этой проблемы и возможности активации для дочерних трансформируемых элементов собственного 3D-пространства в CSS предусмотрено ненаследуемое свойство transform-style, которое применяется к родительскому контейнеру и определяет, как дочерние трансформированные элементы (т.е. элементы, для которых будет задано свойство transform) будут отображаться в 3D-пространстве:

  • flat – будут трансформироваться в плоскости родителя (используется по умолчанию);
  • preserve-3d – будут трансформироваться в своем собственном 3D-пространстве.
HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Свойство transform-style</title>
	
	<style>
				
		/* Оформляем самый внешний div */
		.div_out{
		width: 600px;
		height: 550px;
		margin: auto;		
		padding: 20px;
		background-color: #DFDFDF;
		border-radius: 5px;
		}
		
		/* Оформляем родительские div'ы абзацев */
		.parent_p{
		width: 400px;
		height: 200px;
		margin: auto;		
		margin-top: 20px;
		padding: 20px;
		background-color: #F3F3F3;
		border-radius: 5px;
		transform: perspective(200px) rotateX(0.3rad);
		}
		
		/* Оформляем возможность самостоятельной 
		трансформации дочернего абзаца */
		.three_d{
		transform-style: preserve-3d;
		}
				
		/* Это общий стиль абзацев */		
		p{
		width: 320px;
		height: 150px;
		margin: auto;
		padding: 20px;
		background-color: #55aa55;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		color: #F9F9F9;
		transform: rotateX(-150deg);
		}
		
	</style>
	
</head>
<body>
		
	<div class="div_out">
		
		<div class="parent_p">
					
			<p>
				Этот абзац трансформируется в <br>
				2D-пространстве своего родителя: <br>
				transform-style: flat (по умолчанию)
			</p>
									
		</div>
				
		<div class="parent_p three_d">
						
			<p>
				Этот абзац трансформируется в <br>
				собственном 3D-пространстве: <br>
				transform-style: preserve-3d
			</p>
						
		</div>
		
	</div>
	
</body>
</html>

Пример №13. Пример использования css-свойства transform-style

Итак, в примере выше у нас имеется обычный общий 'div' (темно-серый фон), в котором расположены два других 'div', которые подвергаются идентичной трансформации поворота вокруг оси X (запустите пример в браузере и визуально убедитесь в этом). Оба этих блока имеют еще и по одному дочернему абзацу, которые мы также пытаемся подвергнуть дополнительной 3D-трансформации поворота вокруг оси X (она лежит в плоскости родительского для текущего абзаца элемента). Однако, если в нижнем блоке мы видим, что абзац дополнительно повернулся (как мы и ожидали), то в верхнем блоке мы поворота не увидели. Вместо этого мы увидели какую-то 2D-трансформацию, получившуюся в результате проецирования точек третьего измерения на плоскость родительского элемента. Это связано с тем, что в нижнем блоке мы активировали для абзаца собственное 3D-пространство при помощи класса three_d.

Обязательно поэкспериментируйте с данным примером, попробовав, например, применить к абзацам трансформацию поворота вокруг оси Z (разницы видно не будет, т.к. такая трансформация будет происходить в плоскости родительского элемента).

css-свойство backface-visibility

Когда в результате трансформации элемента (например, поворота вокруг оси X) он поворачивается к нам обратной стороной, его обратная сторона по умолчанию остается видимой пользователю и отображается зеркально (см. пример №14). Однако такое поведение можно легко изменить при помощи ненаследуемого css-свойства backface-visibility, которое определяет, будет показываться обратная сторона элемента или нет. В качестве значений свойство принимает два ключевых слова:

  • visible – обратная сторона элемента видна и отображается зеркально сквозь переднюю сторону элемента (используется по умолчанию);
  • hidden – обратная сторона элемента не видна (скрывается за передней поверхностью элемента).
HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Свойство backface-visibility</title>
	
	<style>
				
		/* Оформляем родительский div абзацев */
		div{
		width: 550px;
		height: 550px;
		margin: auto;		
		padding: 40px;
		background-color: #DFDFDF;
		border-radius: 5px;
		}
		
		/* Это общий стиль абзацев */		
		p{
		width: 320px;
		margin: auto;
		margin-top: 20px;
		padding: 30px;
		background-color: #55aa55;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		color: #F9F9F9;
		transform: rotateX(170deg);
		}

		/* Это класс 1-го трансформируемого абзаца */	
		.p_1{backface-visibility: visible;}
		
		/* Это класс 2-го трансформируемого абзаца */	
		.p_2{backface-visibility: hidden;}	
		
	</style>
	
</head>
<body>
			
	<div>
				
		<p class="p_1">
			1-й трансформированный абзац: <br>
			backface-visibility: visible
		</p>
		
		<p class="p_2">
			2-й трансформированный абзац: <br>
			backface-visibility: hidden
		</p>
			
	</div>
	
</body>
</html>

Пример №14. Пример использования css-свойства backface-visibility

В примере выше второй элемент не отображается, т.к. он больше не просвечивается. Это может быть полезно, когда нужно создать для пользователя впечатление того, что у элемента имеется более одной стороны. Например, чтобы создать игральную карту, можно взять два одинаковых по размеру фоновых изображения, применить к ним соответствующую трансформацию поворота и установить для backface-visibility значение visible. При повороте на угол более, чем девяноста градусов, одно изображение станет невидимым, а второе наоборот. Этот и другие примеры использования трансформаций в анимации можно посмотреть на соответствующей странице нашего учебного сайта №1.

Пару слов о 3D-функциях трансформации

В конце хотелось бы сказать пару слов о перечисленных вначале страницы 3D-функциях translate3d(), scale3d(), rotate3d() и matrix3d(). Их использование предусматривает некоторое знание математики и матриц, что подходит далеко не каждому верстальщику. Поэтому в большинстве случаев о них можно смело забыть и в случаях, когда требуется трансформация элемента вдоль оси Z, пользоваться более простыми функциями translateZ(), scaleZ() и rotateZ(). Тоже самое касается трехмерных трансформаций и вдоль других осей.

Далее, следует обратить внимание на то, что в списке отсутствуют функции skewZ() и skew3d(). Это связано с тем, что skew - единственная трансформация, которую допускается осуществлять только на плоскости (деформация сдвига вдоль оси Z не разрешается).

Несмотря на то, что CSS позволяет нам преобразовывать двумерные html-элементы в трехмерном пространстве добавляя чувство глубины в сцену, сами элементы все равно остаются плоскими. Поэтому сделать из квадрата куб никак не получится, для этого потребуется целых шесть отдельных элементов по одному для каждой стороны. Тем не менее, если говорить о создании красивых 3D-эффектов на страницах сайтов, то возможностей CSS для этого вполне достаточно.

Быстрый переход к другим страницам