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

Question

这是第一个截图。这是从任务中排除的。

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

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

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

这里是我试过

<div id="gallery"> 
     <a class="a row1" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" /></a> 
     <a class="b row1" href="./example/10_b.jpg" title=""><img alt="" src="./example/10_s.jpg" /></a> 
     <a class="c row1" href="./example/11_b.jpg" title=""><img alt="" src="./example/11_s.jpg" /></a> 
     <a class="d row1" href="./example/12_b.jpg" title=""><img class="last" alt="" src="./example/12_s.jpg" /></a> 
     <a class="e row1" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" /></a> 
     <a class="f row1" href="./example/10_b.jpg" title=""><img alt="" src="./example/10_s.jpg" /></a> 
     <a class="g row1" href="./example/11_b.jpg" title=""><img alt="" src="./example/11_s.jpg" /></a> 


     <a class="a row2" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" /></a> 
     <a class="b row2" href="./example/10_b.jpg" title=""><img alt="" src="./example/10_s.jpg" /></a> 
     <a class="c row2" href="./example/11_b.jpg" title=""><img alt="" src="./example/11_s.jpg" /></a> 
     <a class="d row2" href="./example/12_b.jpg" title=""><img class="last" alt="" src="./example/12_s.jpg" /></a> 
     <a class="e row2" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" /></a> 
     <a class="f row2" href="./example/10_b.jpg" title=""><img alt="" src="./example/10_s.jpg" /></a> 
     <a class="g row2" href="./example/11_b.jpg" title=""><img alt="" src="./example/11_s.jpg" /></a> 

     <a class="a row3" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" /></a> 
     <a class="b row3" href="./example/10_b.jpg" title=""><img alt="" src="./example/10_s.jpg" /></a> 
     <a class="c row3" href="./example/11_b.jpg" title=""><img alt="" src="./example/11_s.jpg" /></a> 
     <a class="d row3" href="./example/12_b.jpg" title=""><img class="last" alt="" src="./example/12_s.jpg" /></a> 
     <a class="e row3" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" /></a> 
     <a class="f row3" href="./example/10_b.jpg" title=""><img alt="" src="./example/10_s.jpg" /></a> 
     <a class="g row3" href="./example/11_b.jpg" title=""><img alt="" src="./example/11_s.jpg" /></a> 

     <div class="caption"> 
      this is test caption 
     </div> 
     <div class="close"> 
      X 
     </div> 

     <div class="next">></div> 
     <div class="prev"><</div> 
    </div> 

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，缺少什么？

Answer 1

您可以使用CSS透视+ transform：rotateY来为图像透视图，而不是切分图像。

看看这个小提琴：http://jsfiddle.net/m1erickson/RmeeG/它改编自这个职位上的CSS-技巧：http://css-tricks.com/almanac/properties/p/perspective

CSS：

body { 
    background-color: ivory; 
} 
* { 
    box-sizing: border-box; 
} 
body { 
    font-size: 16px; 
} 
.wrapper { 
    perspective: 1000px; 
    margin: 4em auto; 
    width: 37em; 
} 
.inner { 
    width:150px; 
    transition: .3s; 
    transform: rotateY(35deg); 
} 
.inner figure { 
    box-shadow: -6px 6px 2px -3px rgba(100, 100, 100, .1); 
    width: 11em; 
    padding: 1em; 
    display: inline-block; 
    margin-right: 1em; 
    background: rgba(250, 200, 200, 0.1); 
    border: 1px solid rgba(250, 200, 200, .5); 
} 
.inner figcaption { 
    text-align: center; 
    margin: .5em 0; 
    font-family:'Source Sans Pro', sans-serif; 
    font-weight: bold; 
    color: darken(tomato, 15%); 
} 
.inner img { 
    display: block; 
    height: auto; 
    max-width: 100%; 
    margin: 0 auto; 
    -webkit-filter: sepia(75%); 
}