CSS 将图像框架放置在另一张图像上以创建类似绘画的效果

Question

我从网站设计师那里得到了以下结果:http://mp-books.ru/html/img/result_03.jpg

想法是类似邮票的框架将保留在页面上，但人物图片会根据情况而变化，将从数据库中获取。

我得到了这个结果:http://jsfiddle.net/alexpeta/MUpk8/1/但这是我能做的最好的事情。

我尝试过像旋转

-webkit-transform: rotate(-18deg); 
    -moz-transform: rotate(-18deg); 
    transform:rotate(-18deg); 
    -o-transform:rotate(-18deg);

但 IE 不允许这种转换，因为它有具有精确度数的过滤器:例如:45、90、180 等...并且客户希望图片在每个浏览器中都有标题。

对这个脑力破坏有什么帮助吗？

问候， 亚历克斯

Answer 1

您可以使用 MATRIX图像变换

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
    M11=0.951, M12=0.309,
    M21= -0.309, M22=0.951);

相当于 18 度

计算:

[cos(18)  sin(18)]
[-sin(18) cos(18)]