• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создание 3D эффекта трансформации текста (Как сделать 3D-трансформацию с помощью средствами CSS)
Создание 3D эффекта трансформации текста
Kosten
Дата: Суббота, 2018-11-24, 22:33 | Сообщение 1
Администраторы
Сообщений:18866
Награды: 55


Давайте рассмотрим как преобразовать 3D трансформацию текста при наведение курсора с помощью средствами CSS при поведением объекта на его оси. Здесь сразу нужно добавить, что такой трюк будет видеть на новом браузере, на старой программе не чего не получится, и выглядеть как фон будет.

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



Приступаем к установке:

HTML

Код
<div class="kodignissimos"></div>
<div id="darcitationem">
  <h1>ZorNet - портал для вебмастера</h1>
  <h2>This block looks at your mouse position.</h2>
  <p>Здесь будет описание.
</div>

CSS

Код
body{
  margin: 0;
  background-image: url(https://d13pix9kaak6wt.cloudfront.net/background/users/z/i/r/zirkzank_1395231240_57.jpg);
  background-size:cover;
  background-attachment: fixed;
  font-family: Arial;
  font-size: 1.2em;
}

h1, h2, p{ margin: 0; padding: 10px; }

h1{
  font-family: Impact;
  font-weight: normal;
  letter-spacing: 0.17em;
}

#darcitationem {
    width: 435px;
    color: #eaeaea;
    margin: 0 0 0 8%;
    text-align: justify;
}

.kodignissimos{ width: 0; height: 100%; }

#darcitationem, .kodignissimos{
  display:inline-block;
  vertical-align:middle;
}

JS

Код
var pane = $("#darcitationem");
var winMidHeight = $(window).height() / 2;

var xAngle = 0,
  yAngle = -10,
    zAngle = -2;

var xSpeed = 50,
    ySpeed = 80,
    zSpeed = 0;

pane.css("transform", "rotateX(" + xAngle + "deg) \
                               rotateY(" + yAngle + "deg) \
                               rotateZ(" + zAngle + "deg)");

$(document).mousemove(function(e){

  var ex = e.pageX, ey = e.pageY;
  ex *= -1;
  ey -= winMidHeight;
   
    pane.css({
    transform: "rotateX(" + (xAngle+(ey/xSpeed)) + "deg) \
        rotateY(" + (yAngle+(ex/ySpeed)) + "deg) \
        rotateZ(" + (zAngle) + "deg)"
  });
});

Также можно посмотреть этот эффект на demo странице.

Демонстрация
Прикрепления: 5189606.jpg(122.1 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создание 3D эффекта трансформации текста (Как сделать 3D-трансформацию с помощью средствами CSS)
  • Страница 1 из 1
  • 1
Поиск: