CSS умеет 3D,
анимацию
и вообще…
Но зачем?
Функциональность
Надежность
Удобство
Офигенность
Индивидуальность
Физика
FUN
Баннеры
Сайты
Промо-игры
Баннеры
гомогенность
Скорость загрузки
Стоимость
WEB API
Теперь — банановый
FLASH
Изображение
FLASH
HTML5
Изображение
Ключевые моменты
<a href="http://moo.com/" class="moo-activity">
<section class="outer-wrapper">
<section class="inner-wrapper">
<section class="slogan-1">
<p>One year ago,<br>
moo decided to create<br>
the finest business cards<br>
on the web.</p>
<p>they're here.</p>
</section>
<section class="slogan-2">
<p><strong>LUXE</strong> by moo</p>
</section>
<p class="bg"></p>
</section>
</section></a>
Эффект размытия текста
размыто
color:transparent;
text-shadow:0 0 30px rgba(255,255,255,0);
четко
color:transparent;
text-shadow:0 0 0 rgba(255,255,255,1);
Перспектива
perspective-origin: 50%;
perspective: 900px;
backface-visibility: visible;
http://www.w3.org/TR/css3-3d-transforms/
Трансформации
transform:
translate,
scale,
rotate,
skew,
perspective,
matrix;
transform-origin: 50%;
transform-style: preserve-3d;
http://www.w3.org/TR/css3-2d-transforms/
http://www.w3.org/TR/css3-3d-transforms/
Анимация поворота
@keyframes 'turnaround-part-1'{
from{
transform:
translateZ(-600px)
rotateX(50deg)
rotate(90deg);
}
to{
transform:
translateZ(-600px)
rotateX(50deg)
rotate(0deg);
}
}
Анимация появления текста
@keyframes 'see-me'{
0%{
text-shadow:0 0 30px rgba(255,255,255,0);
}
100%{
text-shadow:0 0 0 rgba(255,255,255,1);
}
}
Применение анимации к элементу
animation-name:'see-me';
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 8s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
http://dev.w3.org/csswg/css3-animations/
Плавная смена состояний
transition-property: all;
transition-duration: .3s;
transition-timing-function: ease-in;
transition-delay: .1s;
http://www.w3.org/TR/css3-transitions/
Вопросы
Сайты
edge
Ключевые моменты
<a href="#">
<div class="window">
<img src="spoiler/good-2.jpg"
alt="Товар"
class="illustration">
<p class="price">69 TL</p>
</div>
<h2 class="title">…</h2>
</a>
Поворот по наведению
.catalog-widget .line article .price{
transform:translateZ(-1px) rotateY(180deg);
}
.catalog-widget .line article:hover .window{
transform: rotateY(180deg);
transition: all .4s ease-out;
}
Вопросы
Промо-игры
Ключевые моменты
<section class="screen navigation-screen">
<div class="turn-wrapper">
<nav class="navigation element">
<a href="#" class="new-game">Game</a>
<a href="#" class="rules">Rules</a>
<a href="#" class="scores">Scores</a>
</nav>
<img src="img/star-1.png" class="artifact-1"
alt="Звездочка">
<img src="img/star-1.png" class="artifact-2"
alt="Звездочка">
<img src="img/pepper-1.png" class="artifact-3"
alt="Звездочка">
</div></section>
Позиционируем артефакты
transform: translateZ(150px) scale(.5);
Вызываем кинетоз
gameController.prototype.changeOrigin = function(event){
var x = event.pageX;
var y = event.pageY;
var size = this.viewport();
var origin = {
x:Math.round((x/size.width)*60),
y:Math.round((y/size.height)*60)}
var currentScreen = $(".navigation-screen");
$(".turn-wrapper",currentScreen)[0]
.style[Modernizr.prefixed('transform')] =
'rotateY('+(origin.x-30)+'deg) '+
'rotateX('+(-(origin.y-30))+'deg)';
};
Мягкая деградация
3D и анимация
Транзишены
Скриптинг
Статика
