Perspective Crop с CSS3

Question

Я хочу, чтобы создать перспективную культуру, как эффект с CSS3, как это:

я попробовать это делает мой сам, но не мог, любая помощь будет оценена.

вот моя попытка: http://jsfiddle.net/krish7878/y9eusob9/

HTML код:

<div class="container"> 
     <img src="http://img.netcarshow.com/Lotus-Evora_GX_Racecar_2013_1600x1200_wallpaper_01.jpg" alt="main image" /> 
    </div><!-- /.container --> 

CSS код:

.container{ 
    overflow: hidden; 
    width: 300px; 
    height: 200px; 
    margin-top: 30px; 
    margin-left: 30px; 
    border-top-right-radius: 20px; 
} 

Answer 1

Одним из вариантов может быть добавление контейнера <div>, например. .perspective, который получает желтый цвет фона и использует многоугольник clip-path на картинке.

Хорошим инструментом для создания этих полигонов является Bennett Feely's clippy. Browser support for clip-path еще не совсем там. См. Clipping and Masking in CSS для получения дополнительной информации и опций.

.perspective { 
 
    display: inline-block; 
 
    background-color: #ff0; 
 
} 
 
    
 
.perspective__image { 
 
    display: block; 
 
    -webkit-clip-path: polygon(10% 20%, 90% 10%, 90% 90%, 10% 80%); 
 
    clip-path: polygon(10% 20%, 90% 10%, 90% 90%, 10% 80%); 
 
}

<div class="perspective"> 
 
    <img src="http://www.nicenicejpg.com/400/300" class="perspective__image"/> 
 
</div>

Answer 2

Я нашел отличный учебник по CSS-уловок, что переговоры о делает именно это:

http://css-tricks.com/almanac/properties/p/perspective/

Вы будете использовать свойство transform, чтобы произвести повороты, необходимые для имитации изменения перспективы.

Надеюсь, это поможет!

Answer 3

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

http://cssglobe.com/angled-content-mask-with-css/

В принципе, автор использовал несколько вложенных элементов, были повернуты назад и вперед с помощью overflow: hidden на элементы контейнера.

Answer 4

Для maximum browser support вы можете использовать svg's clipPath.

<svg width="400" height="400"> 
 
    <defs> 
 
    <clipPath id="shape"> 
 
     <path d="M50,50 L400,0 L400,400 L50,350" /> 
 
    </clipPath> 
 
    </defs> 
 
    <foreignObject clip-path="url(#shape)" width="400" height="400"> 
 
    <img src="http://www.lorempixel.com/400/400" /> 
 
    </foreignObject> 
 
</svg>