|
|
| Статистика |
Онлайн всего: 1 Гостей: 1 Пользователей: 0 |
|
3D трансформации CSS3
3D трансформацииCSS3 позволяет форматировать элементы, используя 3D трансформацию. В этой главе вы узнаете о некоторых методах 3D трансформации: Нажмите на элементы ниже, чтобы увидеть разницу между 2D и 3D трансформацией:
2D rotate
3D rotate nternet Explorer, Firefox, и Opera пока еще не поддерживают методы 3D трансформации. Chrome и Safari требуют префикс -webkit-.
Метод rotateX() С помощью метода rotateX(), элемент вращается вокруг своей оси Х при заданном угле. <style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotateX(120deg);
-webkit-transform:rotateX(120deg) /* Safari and Chrome */
}
</style>Метод rotateY() С помощью метода rotateY(), элемент вращается вокруг своей оси Y при заданном угле. Свойства трансформацииВ следующей таблице перечислены все свойства трансформации: | Свойство | Описание | CSS |
|---|
| transform | Применяет 2D или 3D трансформацию к элементу | 3 | | transform-origin | Позволяет изменить позицию трансформированных элементов | 3 | | transform-style | Определяет, как вложенные элементы будут отображаться в 3D-пространстве | 3 | | perspective | Определяет перспективы относительно того, как 3D-элементы, рассматриваются | 3 | | perspective-origin | Задает нижнее положение 3D-элементов | 3 | | backface-visibility | Определяет является ли элемент видимым, когда он не напротив экрана | 3 |
Методы 3D трансформации| Функция | Описание |
|---|
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Определяет 3D трансформацию, с помощью матрицы 4x4 или 16 значений | | translate3d(x,y,z) | Определяет 3D перемещение | | translateX(x) | Определяет 3D трансформацию, используя только значение для оси X | | translateY(y) | Определяет 3D трансформацию, используя только значение для оси Y | | translateZ(z) | Определяет 3D трансформацию, используя только значение для оси Z | | scale3d(x,y,z) | Определяет 3D трансформацию масштабирования | | scaleX(x) | Определяет 3D трансформацию масштабирования с помощью значения для оси X | | scaleY(y) | Определяет 3D трансформацию масштабирования с помощью значения для оси Y | | scaleZ(z) | Определяет 3D трансформацию масштабирования с помощью значения для оси Z | | rotate3d(x,y,z,угол) | Определяет 3D вращение | | rotateX(угол) | Определяет 3D вращение вдоль оси X | | rotateY(угол) | Определяет 3D вращение вдоль оси Y | | rotateZ(угол) | Определяет 3D вращение вдоль оси Z | | perspective(n) | Определяет перспективный вид для 3D трансформированного элемента |
|
| Категория: Css 3 | Добавил: ChronoW (09.07.2013)
|
| Просмотров: 990
| Теги:
| Рейтинг: 0.0/0 |
|
|