CSS 3 3D-преобразования - httpdoc.ru

CSS3 3D-преобразования

Элементы 3D-преобразований

Преобразование CSS3 3D позволяет выполнять преобразование основных элементов, например rotation , scaling и т. Д., В трехмерном пространстве.

Как и 2D-преобразование, 3D-преобразованный элемент также не влияет на окружающие элементы, он может перекрывать их. Элемент просто занимает свое собственное пространство, указанное ему перед преобразованием.

Функция translate3d ()

Эта функция перемещает элемент из его текущего положения в новое положение по осям X, Y и Z. Обратите внимание, что в 3d у нас также есть одна ось z, тогда как в 2D у нас есть только оси x и y. Эта функция записывается как translate3d(x-axis, y-axis, z-axis) в пикселях. Функция translate3d(20px, 35px, 50px) перемещает изображение на 20 пикселей по положительной оси X и на 35 пикселей по положительной оси Y и на 50 пикселей по положительной оси Z.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS 3 translate3d() Method </title> 
  <meta charset="UTF-8"> 
<style>
.container{
  width: 200px;
    height: 125px;
    perspective: 500px;
    border: 4px solid #e5a043;
    background: #fff2dd;
  margin: 30px;
}
.transformed {
    -webkit-transform: translate3d(25px, 25px, 50px); /* Chrome, Safari, Opera */
    transform: translate3d(25px, 25px, 50px); /* Standard syntax */
}
</style>
</head>
<body>
    <h2>Before Translation:</h2>
    <div class="container">
        <img src="PUBG.png" alt="PUBG" height="125px" width="200px">
    </div>
    <h2>After Translation:</h2>
    <div class="container">
        <img src="PUBG.png" alt="PUBG" height="125px" width="200px" class="transformed">
    </div>
</body>
</html>

Выход

CSS 3 translate3d() Method

Перед переводом:

PUBG

После перевода:

PUBG

Функция rotate3d ()

rotate3d() Функция поворачивает элемент в 3D - пространстве с помощью заданной степени вокруг вектора направления. Это синтаксис: rotate(vx, vy, vz, angle) . Функция rotate3d(1, 0, 0, 30deg) повернет изображение по оси X на угол 30 градусов. Отрицательные значения повернут элемент в противоположном направлении.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS 3 rotate3d() Method </title> 
  <meta charset="UTF-8"> 
<style>
.container{
    margin: 50px;
	width: 200px;
    height: 125px;
  	perspective: 300px;
  	border: 4px solid #a2b058;
    background: #f0f5d8;
}
.transformed {
    -webkit-transform: rotate3d(0, 1, 0, 60deg); /* Chrome, Safari, Opera */
    transform: rotate3d(0, 1, 0, 60deg); /* Standard syntax */
}
</style>
</head>
<body>
    <h2>Before Rotation:</h2>
    <div class="container">
      	<img src="image.png" alt="PUBG" style="height:125px; width:200px;">
    </div>
    <h2>After Rotation:</h2>
  	<div class="container">
        <img src="image.png" alt="PUBG" class="transformed" style="height:125px; width:200px;">
    </div>
</body>
</html>

Выход

CSS 3 rotate3d() Method

Перед вращением:

PUBG

После вращения:

PUBG

Функция scale3d ()

scale3d() Функция изменяет размер элемента. Это синтаксис: scale(x-axis, y-axis, z-axis) . Эту функцию следует использовать в сочетании с другими функциями преобразования, такими как rotate3d(x,y,z) и perspective() . Функция scale3d(1, 2, 1) масштабирует элементы по оси Y, а функция rotate3d(1, 0, 0, 60deg) поворачивает изображение по оси X на угол 60 градусов.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS 3 scale3d() Method </title> 
  <meta charset="UTF-8"> 
<style>
.container{
    margin: 50px;
	  width: 200px;
    height: 125px;
  	perspective: 300px;
  	border: 4px solid #6486ab;
    background: #e9eef3;
}
.transformed {
    -webkit-transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Chrome, Safari, Opera */
    transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Standard syntax */
}
</style>
</head>
<body>
    <h2>Before Scaling:</h2>
    <div class="container">
      	<img src="PUBG-GAME.png" alt="PUBG" style="height:125px; width:200px;">
    </div>
    <h2>After Scaling:</h2>
  	<div class="container">
        <img src="PUBG-GAME.png" alt="PUBG" class="transformed" style="height:125px; width:200px;">
    </div>
</body>
</html>

Выход

CSS 3 scale3d() Method

Перед масштабированием:

PUBG

После масштабирования:

PUBG

Свойства преобразования CSS

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