<MyRusakov.ru />

Создание Интернет-магазина на PHP и MySQL

Создание Интернет-магазина на PHP и MySQL

Видеокурс "Создание Интернет-магазина на PHP и MySQL" - это уникальный курс по созданию Интернет-магазина с нуля. Особенностью данного курса является то, что создание идёт с самого начала, то есть от идеи. Далее создаётся дизайн всех необходимых страниц, после делается их вёрстка. Затем создаётся движок на PHP и MySQL, после делается Admin-панель и, наконец, готовый сайт размещается в Интернете.

Адрес созданного в этом курсе сайта: http://storedvd.ru

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

CSS3 Трансформации.

CSS3 Трансформации.

В этой статье мы рассмотрим свойство transform, которое позволяет нам применять различные трансформации к элементам на странице.

Рассматривать данное свойство мы будем сразу на примере, так что давайте создадим HTML разметку.

<html>
<head>
  <title>Transforms</title>
  <meta charset="utf-8">
</head>
<body>
  <div class="block">CSS3 Трансформации</div>
</body>
</html>

И зададим первоначальные стили

body {
  background: #aaa;
  font: 1em "PT Sans", Tahoma, Arial;
}

.block {
  background: rgba(0,0,0,.3);
  border-radius: 8px;
  border: 3px solid #fff;
  color: #fff;
  font-size: 1.2em;
  height: 150px;
  line-height: 150px;
  margin: 80px;
  text-align: center;
  width: 250px;
}

Теперь перейдём, собственно, к нашему свойству.

.block {
  transform: translate(30px, 10px) rotate(30deg) scale(.5);
}

translate указывает на какое расстояние сдвинуть объект по оси X и по оси Y, а rotate - на сколько градусов повернуть. Можно задавать отрицательные значения, чтобы объект двигался/поворачивался в противоположную сторону. Scale отвечает за масштаб. Если мы напишем 2, то объект увеличится в 2 раза, а если 0.5(как в нашем случае), то уменьшится.

.block {   transform: skewX(30deg) skewY(30deg); }

skewX отвечает за скос объекта по оси X, а skewY по оси Y.

.block {
  transform: rotate(30deg);
  transform-origin: top left;
}

transform-origin изменяет точку, относительно которой идёт трансформация по осям X, Y и Z(необязательно). По-умолчанию она находится в центре, но мы можем её поменять. Теперь наш объект будет вращаться относительно верхнего левого угла. Значения так же можно задавать в процентах(кроме оси Z)

Всё, что мы сейчас рассмотрели, были 2-х мерные трансформации, но есть ещё и 3-х мерные.

.block {
  transform: rotateY(50deg);
}

Здесь мы поворачиваем объект по оси Y на 50 градусов в 3-х мерном пространстве, но это выглядит нереалистично, потому что нет перспективы. Перспектива(perspective) применяется к родительскому элементу. Изменим нашу HTML разметку: обернём наш блок в ещё один.

<div class="wrapper">
  <div class="block">CSS3 Трансформации</div>
</div>

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

.wrapper {
  perspective: 500px;
  width: 200px;
  height: 200px;
}

.block {
  transform: rotateY(50deg);
}

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

Также есть свойство rotate3d, которое позволяет нам вращать наш объект сразу во всех осях.

.block {   transform: rotate3d(-1,1,1, 40deg); // x,y,z,deg }

Наш объект повернётся на 40 градусов, но по оси X на -40, потому что мы поставили значение в -1. Если значение 0, то ось выключена.

На этом всё! Обязательно попробуйте пример из статьи и придумайте свои.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (3):

gordon gordon 23.05.2014 14:56:38

В гуглохроме не работает :(

Ответить

AlexeyS AlexeyS 31.03.2016 06:57:53

Мне кажется не работает, потому что нужно еще добавить псевдокласс :hover, и туда так же прописывать свойства transform. Ведь именно он отвечает на поведение блока при наведении на него курсора мышки (не нажимая ей на блок). Например: .block:hover { transform: rotate3d(-1,1,1, 40deg); // x,y,z,deg } Это я взял самый нижний пример, который привел Михаил. И так же для всех предыдущих.

Ответить

aneryadov aneryadov 15.12.2014 10:47:01

уф, красота. И какой малый вес! а вот так: body { background: #aaa; font: 1em "PT Sans", Tahoma, Arial; } .block { background: #362B1B; border-radius: 8px; border: 3px solid #563D1A; color: #D99230; font-size: 1.2em; height: 150px; line-height: 150px; margin: 80px; text-align: center; width: 250px; transition: all .5s ease-in-out; } .block:hover { transform: rotateY(1080deg); transition: all 1.5s ease-in-out; } - вообще глаз не отвести

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.