Могу ли я легко наклонить изображение с помощью HTML или CSS?

Question

некоторые рисунки на веб-странице пользователя Apple показывают фотографию, которая слегка наклонена, например, под углом 5 или 10 градусов. хотя это не так уж и важно, веб-страница действительно отличается от «всего остального».

правда ли, что в настоящее время, используя HTML или CSS, этого еще нельзя сделать?

как большая фотография посередине:

альтернативный текст http://img7.imageshack.us/img7/383/phototilt.png

(программа позволяет выбирать фотографии, а затем динамически создавать страницы (html и jpg) для вас)

Answer 1

Вы можете сделать это, но только в Firefox 3.5+ и Safari 3.2+ (и в последних браузерах на основе webkit). Оба предоставляют браузерные CSS-расширения для перекоса: -moz-transform и -webkit-transform соответственно.

Вот хороший пример построения трехмерного куба из divs: (из http://www.fofronline.com/2009-04/3d-cube-using-css-transformations/)

<div class="cube">
        <div class="topFace">
                <div>
                        Content
                </div>
        </div>
        <div class="leftFace">
                Content
        </div>
        <div class="rightFace">
                Content
        </div>
</div>

И CSS:

.cube {
        position: relative;
        top: 200px;
}

.rightFace,
.leftFace,
.topFace div {
        padding: 10px;
        width: 180px;
        height: 180px;
}

.rightFace,
.leftFace,
.topFace {
        position: absolute;
}
.leftFace {
        -webkit-transform: skewY(30deg);
        -moz-transform: skewY(30deg);
        background-color: #ccc;
}

.rightFace {
        -webkit-transform: skewY(-30deg);
        -moz-transform: skewY(-30deg);
        background-color: #ddd;
        left: 200px;
}

Answer 2

CCS 3 предложит такую ​​возможность, но она все еще не является кросс-браузерной, и вы не можете сделать это с традиционным HTML + CSS ... пока.

Веб-сайты с наклонным изображением делают это, поворачивая его, скажем, в Photoshop и делая фон прозрачным. В этом весь трюк.

Подсказка: сохраните это изображение на HD и посмотрите сами. Вероятно, это просто квадратное изображение с прозрачным фоном, или, может быть, у него аккуратно обрезан текущий фон.

Answer 3

Да, с помощью CSS3 вы можете:

-webkit-transform: rotate(20deg);
   -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
     -o-transform: rotate(20deg);
        transform: rotate(20deg);

Поддерживается всеми современными браузерами и IE9 +.

См. CSS-преобразование в MDN для получения дополнительной информации.

Answer 4

Используйте библиотеку PHP GD. Делает вещи намного проще.

Answer 5

Мы делаем что-то похожее на работе, мы должны делать это на лету.

Вы не можете сделать это только с помощью html / css, однако мы используем библиотеку изображений через php-скрипт, чтобы генерировать их автоматически, а затем сделать фон прозрачным.

Answer 6

Вы можете использовать специфичные для Apple атрибуты CSS (которые вскоре будут ратифицированы, а затем они удалят для них префиксы webkit), чтобы сделать это и эффекты анимации, но они будут отображаться только в Safari и Chrome прямо сейчас. Тем не менее, они выглядят довольно красиво, а CSS просто сделать.

Прямо сейчас это, вероятно, просто сделано в Photoshop, и там тоже хорошо сглаживается, так что он имеет постоянный кросс-браузерный вид.

Answer 7

Нет. Вы не можете.

Наклон изображения и текста по-прежнему JavaScript juju.

Редактировать : Или, по крайней мере, вы не могли с CSS2. Начиная с CSS3, есть свойство transform, которое включает в себя повороты.

Answer 8

Насколько мне известно, вы не можете сделать это. Вы уверены, что изображение, о котором вы думаете, не наклонено в Photoshop или аналогичном, а просто добавлено на страницу таким образом?