Как сделать изометрическое 3D в CSS - PullRequest
Новая
       50

Как сделать изометрическое 3D в CSS

5 голосов
/ 27 февраля 2011

Я пытаюсь сделать изометрическое 3D в CSS, вот что у меня сейчас: http://jsfiddle.net/AagGZ/1/ (веб-набор только для тестирования)

Я в основном использую box-shadow, 1px на 1px для создания 3D-эффекта, мне это кажется очень хакерским. При анимации я пытаюсь добавить новые слои размером 1 пиксель, поэтому анимация не срабатывает (не очень приятно).

Есть ли лучший способ реализовать это? Я подумал о CSS Matrix с контентом до и после CSS и добавил div.

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

Спасибо за вашу помощь.

РЕДАКТИРОВАТЬ: я вновь открыл вопрос, потому что тот факт, что вам нужен сплошной цвет фона, является небольшой проблемой, до и после фильтра создайте большие "невидимые" белые стрелки, и это становится очень быстро, когда вы фоны на другой части сайта или когда вы хотите изменить фон при наведении другого элемента. Сейчас я возвращаюсь к своей версии и отключаю анимацию. Любые идеи приветствуются!

Ответы [ 2 ]

5 голосов
/ 28 февраля 2011

Я не уверен, что моя версия менее хакерская, чем ваша.Тем не менее, это интересная проблема, и я попробовал.

http://jsfiddle.net/duopixel/5fdcj/

Моя версия добавляет простые границы, и для создания наклонных углов я использовал формы границ http://www.howtocreate.co.uk/tutorials/css/slopes. Этоне будет работать, если ваш фон не является сплошным цветом.

Мне кажется, самое чистое решение будет включать в себя использование границ изображения: http://www.css3.info/preview/border-image/.

2 голосов
/ 06 марта 2011

Хорошо, это то, что я получил, основываясь на использовании Duopixel фильтров «до» и «после», но с границами, фактически живущими в блоках «до» и «после», так что у меня нет проблем с прозрачностью.1002 *: http://jsfiddle.net/BXUdP/65/

Почему мне это нравится: нет проблем с прозрачностью, работает в IE8.Анимация пока работает только в Firefox 4, хотя есть ошибка с Chrome, которая не может анимировать до и после фильтров.Но исправление запланировано на следующую веху, поэтому на данный момент оно изящно ухудшается.

...