DIV의 너비를 기울이고 수정하는 방법은 무엇입니까?

Question

다른 DIV에 4 장의 사진이 있습니다. 내가 달성하고 싶은 속임수는 기울어 진 직사각형 안의 가면을 가리는 것입니다. 사용자가 직사각형 중 하나를 가리키면 사진이 조금 더 펼쳐집니다.

Static example.

나는 어떤 국부 펀드 않고,이 사용하는 HTML, jQuery를하고 CSS를 달성하고 싶습니다. 이 솔루션은 정사각형의 사각형을 생각할 때 매우 쉽지만 틸트 모양이 나타나면 마법이 시작됩니다.

아이디어를 환영합니다!

Answer 1

당신은 HTML5 캔버스와 paper.js이 작업을 수행 할 수 있습니다.

createSplitPictures(["http://img.over-blog.com/600x450/4/26/15/99/Novembre-2012/image-jaune1.jpg", "http://www.gratuit-en-ligne.com/telecharger-gratuit-en-ligne/telecharger-image-wallpaper-gratuit/image-wallpaper-animaux/img/images/image-wallpaper-animaux-chatons.jpg" , "http://www.desktopwallpaperhd.net/thumbs/19/5/islands-paradise-maldive-nature-background-image-landscape-194469.jpg" , "http://img.over-blog.com/600x450/4/26/15/99/Novembre-2012/image-jaune1.jpg"]); 

http://jsfiddle.net/HDmCN/1/

Answer 2

HTML 5 캔버스를 사용하고 이미지 경로를 변경할 수 있습니다. 나는 당신을 도울 수있는 jsfiddle을 만들었습니다.

http://jsfiddle.net/ihordeyneka/NKbBD/

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
var pattern = null; 
var currentSize = 100; 
var step = 1; 
var direction = 1; 

var imageObj = new Image(); 
imageObj.onload = function() { 
pattern = context.createPattern(imageObj, 'repeat'); 
setInterval(draw, 10); 
}; 
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/wood-pattern.png'; 

function draw() { 
context.clearRect(0, 0, 200, 200); 
context.beginPath(); 
context.moveTo(25,25); 
context.lineTo(currentSize,25); 
context.lineTo(25,currentSize); 

context.closePath(); 
context.fillStyle = pattern; 
context.fill(); 

currentSize += direction * step; 
if(currentSize > 150){ 
    direction = -1; 
} 
if(currentSize < 50){ 
    direction = 1; 
} 
};