• 看看她


• 看看她

原理

旋转 rotateY 形成梯形。注意，必须有 perspective ！

完整代码

<ul id="imghover2-test">
    <li></li>
</ul>
<style>
#imghover2-test {
    -webkit-perspective: 500px;perspective: 500px;
    position:relative; height:100px; background:#ddd; margin:40px 0;
}
#imghover2-test li {
    position: absolute; background:red; width:100px; height:100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: left center;
    -webkit-transform: rotateY(-45deg);
    transform-style: preserve-3d;
    transform-origin: left center;
    transform: rotateY(-45deg);
}
</style>

translate rotate 的另一种写法

-webkit-transform: translate3d(50px,0,0) rotate3d(0,1,0,-45deg);}

源文件下载

如果懒的话，其实可以 js append 那些 divs。less 源文件 或者 css 源文件

via sketchup