Кросс-браузерный CSS transform (даже в IE) / JavaScript / Хабрахабр

Кросс-браузерный CSS transform (даже в IE)

CSS свойство transform позволяет масштабировать, наколнять и поворачивать HTML-блоки с помощью CSS. Движки Firefox, Opera и Webkit имеют встроенную поддержку свойства, чего нельзя сказать об Internet Explorer.
Но не все так печально, в IE есть фильтр DXImageTransform.Microsoft.Matrix который реализует такую функциональность.
Один замечательный человек по имени Zoltan Hawryluk разработал небольшую библиотеку под названием cssSandpaper, с помощью которой можно создавать интересные эффекты.

Примеры работы:

Узнать побольше о том, как создавалась библиотека, а так же скачать можно здесь.

+62

10 марта 2010, 01:53

132

EugeniyPetrov

комментарии (34)

medved13 10 марта 2010, 02:28 #

Как же её колбасит при выделении текста.

sintez 10 марта 2010, 02:30 #

забавно, но текст рендерится некрасиво в таких трансформах. Для практического применения, не знаю, даже, как это использовать

spmbt 10 марта 2010, 03:01 # ↑

К примеру, это демо ajaxian.com/archives/star-wars-html-and-css-a-new-hope сейчас работает под Win только в Хроме, и то криво. А с этой библиотекой будет кроссбраузерно.

(К замечанию ниже про Оперу — еам же написано, что с 10.50 начинает поддерживаться.)

Laughboy 10 марта 2010, 03:06 # ↑

Делал с ротейтом тему отображение категорий фото на одном сайте на подобии как отображаются привью в папках КДЕ 4.х

Идея была в том что фотки как бы налаживаются одна на одну, и получается как бЭ разбросаны фотки + на онКлик наложение поверх всех фото что под другими.
Но потом переделал на ImageMagick, не нравилось что сначала отображаются нормально а потом поворачивает и эффект «палароида» в IMagick было проще сделать.

Steward 10 марта 2010, 10:26 # ↑

налаживаются = накладываются, если вы конечно лажу не имели ввиду как процесс

Aux 10 марта 2010, 04:05 # ↑

В Opera 10.50 текст рендерится очень красиво и читабельно.

homm 10 марта 2010, 07:57 # ↑

При 100% масштабе — да.

Aux 10 марта 2010, 13:14 # ↑

На сколько я помню, в рекомендациях W3C про зум вообще ни слова (:

Mansiper 10 марта 2010, 08:06 # ↑

Зачем вы ищите правильное применение?
Кто-нибудь обязательно что-нибудь интересное придумает. А пока это просто забавно и необычно. Разве этого не достаточно? :)

metrofun 10 марта 2010, 02:36 #

Помоему в IE6 на любую CSS3 фичу найдёться свой фильтр ) А как я был счастлив, когда png полупрозранчный его заставил отображать более мение правельно. Всё-такие в IE6 много скрытых талантов )))))))))) Только вот писать под него, это рак мозга

wazek 10 марта 2010, 11:06 # ↑

Очень даже хорошо в ИЕ6 все отображается. Не пойму за что человека минусуют. Браузер 2001 года поддерживает то, что другие только через 8 лет научились, пусть и через фильтр. Но и ЦСС3 тогда и не было. Возможно благодаря ИЕ этот стиль и появился в спецификации.

Mithgol 10 марта 2010, 15:07 # ↑

помоему → по-моему

найдёться → найдётся

полупрозранчный → полупрозрачный

более мение → более-менее

правельно → правильно

всё-такие → всё-таки

Учите русский или хотя бы воспользуйтеся автоматической проверкою правописания.

–1

Necrys 10 марта 2010, 23:44 # ↑

А вы написали векторный фидонет?

–2

Mithgol 13 марта 2010, 20:48 # ↑

TheMengzor 5 ноября 2011, 19:31 # ↑

WTF?

odiszapc 10 марта 2010, 02:50 #

В Opera 10.10 нифига не трансформиться, в Хроме все ок, и даже в IE

SowingSadness 10 марта 2010, 03:31 # ↑

В Опера 10.50 все фига трансформится.
Другое дело, что я применение этому не вижу :)

Zhendalf 10 марта 2010, 17:26 # ↑

Про применение статейка

kolpeex 10 марта 2010, 05:39 #

В Опере скролла нет в примере, где куб.

–2

mefix 10 марта 2010, 11:35 # ↑

В Опере 10.50 уже есть.

Spavvn 10 марта 2010, 11:43 # ↑

В этом же примере написано об этом.

Lord_Daedra 10 марта 2010, 07:29 #

а можно сделать текст со скроллингом как в звёздных войнах, начало?

easterism 10 марта 2010, 16:32 # ↑

ajaxian.com/archives/star-wars-html-and-css-a-new-hope

+10

homm 10 марта 2010, 08:29 #

Надо ли говорить, что все примеры имеют заливку фона, потому, что иначе в ие текст превращается в дерьмо? twitpic.com/17o7sq

homm 10 марта 2010, 11:05 # ↑

Интересно посмотреть на человека, который за ценные сведения об ограничениях данного метода поставил минус комментарию и в карму :)

topcreative 10 марта 2010, 11:55 # ↑

исправим)

bdiang 5 апреля 2010, 12:53 # ↑

А именно: IE грохает clear-type текста, если на контейнер наложен filter :(

Aux 10 марта 2010, 13:15 # ↑

Это тут так принято. Зато если писать похвалы каким-нибудь костылям, то карма растёт как на дрожжах.

moscow_beast 10 марта 2010, 10:00 #

Под это свойство просто напрашивается желтый текст:
«Episode IV
A NEW HOPE
It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire. During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet. Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy....»

TiGR 10 марта 2010, 11:50 # ↑

Так ведь уже был где-то, даже на хабре пробегало.

easterism 10 марта 2010, 15:51 #

Этот комент я написал с этой страницы easterism.com/habrahabr.php

easterism 10 марта 2010, 16:13 # ↑

Для настоящих извращенцев easterism.com/habrahabr.php?q=http://easterism.com/habrahabr.php
как юзать, думаю, догадались :)

Zhendalf 10 марта 2010, 17:21 #

Хороший материал, спасибо.
Для поворотов фоток я делал вот так

leshaogonkov 11 марта 2010, 12:26 #

Вот бы ещё курсор бы менял свою геометрию, при наведении на ссылку, расположенную «на грани» ^_^
легко ведь сделать

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Языки программирования ↓

JavaScript