css3 图像角度,以特定角度旋转图像，CSS3或Canvas？

由于截屏提示，用户会上传图片1.它看起来就像图像2.如图所示，最终输出的预期。

我试着用CSS3做同样的事情。以下是我已经很长一段时间

我正在努力实现CSS3同样的事情后实现。

这里是我试过

this is test caption

X

>

<

HTML和这里是它

#gallery {

width: 600px;

height: 450px;

background-position: center;

background-color: #999;

background-repeat: no-repeat;

position: absolute;

}

.galleryed {

z-index: 100;

}

.galleryed a {

display: none;

}

.caption {

background: none repeat scroll 0 0 #333;

bottom: 0;

color: #FFFFFF;

display: block;

padding: 2%;

position: absolute;

width: 96%;

display: none;

opacity: 0.3;

}

.caption:hover {

opacity: 1;

}

.close {

background: none repeat scroll 0 0 #333;

top: 0;

right: 0;

color: #FFFFFF;

display: block;

padding: 2%;

position: absolute;

display: none;

opacity: 0.3;

}

.next:hover,.prev:hover,.close:hover {

opacity: 1;

cursor: pointer;

}

.next {

background: none repeat scroll 0 0 #333;

top: 200px;

right: 0;

color: #FFFFFF;

display: block;

padding: 2%;

position: absolute;

display: none;

opacity: 0.3;

}

.prev {

background: none repeat scroll 0 0 #333;

top: 200px;

left: 0;

color: #FFFFFF;

display: block;

padding: 2%;

position: absolute;

display: none;

opacity: 0.3;

}

.locked,.locked:hover {

background: none repeat scroll 0 0 #666 !important;

opacity: 0.3;

}

#gallery a {

perspective: 100px;

-webkit-perspective: 100px;

-moz-perspective: 100px;

-ms-perspective: 100px;

float: left;

}

#gallery img {

margin-bottom: -15px;

margin-top: 30px;

}

#gallery .a img {

transform: rotateY(15deg);

-webkit-transform: rotateY(15deg);

-moz-transform: rotateY(15deg);

-ms-transform: rotateY(15deg);

}

#gallery .g img {

transform: rotateY(-15deg);

-webkit-transform: rotateY(-15deg);

-moz-transform: rotateY(-15deg);

-ms-transform: rotateY(-15deg);

}

#gallery .b {

padding-left: 10px;

}

#gallery .f {

padding-right: 10px;

}

#gallery .b img {

transform: rotateY(12deg);

transform-origin: -100% 0% 0;

-webkit-transform: rotateY(12deg);

-webkit-transform-origin: -100% 0% 0;

-moz-transform: rotateY(12deg);

-moz-transform-origin: -100% 0% 0;

-ms-transform: rotateY(12deg);

-ms-transform-origin: -100% 0% 0;

}

#gallery .f img {

transform: rotateY(-12deg);

transform-origin: 200% 0% 0;

-webkit-transform: rotateY(-12deg);

-webkit-transform-origin: 200% 0% 0;

-moz-transform: rotateY(-12deg);

-moz-transform-origin: 200% 0% 0;

-ms-transform: rotateY(-12deg);

-ms-transform-origin: 200% 0% 0;

}

#gallery .c img {

transform: rotateY(9deg);

transform-origin: -350% 0% 0;

-webkit-transform: rotateY(9deg);

-webkit-transform-origin: -350% 0% 0;

-moz-transform: rotateY(9deg);

-moz-transform-origin: -350% 0% 0;

-ms-transform: rotateY(9deg);

-ms-transform-origin: -350% 0% 0;

}

#gallery .e img {

transform: rotateY(-9deg);

transform-origin: 450% 0% 0;

-webkit-transform: rotateY(-9deg);

-webkit-transform-origin: 450% 0% 0;

-moz-transform: rotateY(-9deg);

-moz-transform-origin: 450% 0% 0;

-ms-transform: rotateY(-9deg);

-ms-transform-origin: 450% 0% 0;

}

#gallery .d img {

transform: rotateY(1deg);

transform-origin: -5000% 0 0;

-webkit-transform: rotateY(1deg);

-webkit-transform-origin: -5000% 0 0;

-moz-transform: rotateY(1deg);

-moz-transform-origin: -5000% 0 0;

-ms-transform: rotateY(1deg);

-ms-transform-origin: -5000% 0 0;

}

我很高兴这是它似乎是工作在支持CSS3所有的浏览器的CSS。 但重点是我没有得到预期的输出。

最重要的是，在final output的情况下，图像之间的间距更加一致和更好，但在我的情况下不尽相同。

只会css3使它实现，或者我需要学习Canvas吗？

如果只有css3，缺少什么？

2013-11-01

KuKu

+0

相反切片的图像，你可以使用CSS视角+变换：旋转Y到给你的图像透视。看看这个小提琴：http：//jsfiddle.net/m1erickson/RmeeG/这是改编自这篇文章的CSS技巧：http://css-tricks.com/almanac/properties/p/perspective/ –

+0

@markE。我认为你提供了更好的解决方案。请添加同样的答案，以便我可以使它解决.. –