3d rotate preserve 3d

by techsin

HTML

<div class="m">
    <div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<br><div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<br><div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<br><div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<br><div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<br><div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>

</div>

CSS

.sec{
    display: inline-block;
    width:50px;
    height: 70px;
    background-color: blue;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
}
.m{
    -webkit-transform-style:  preserve-3d;
    -moz-transform-style:  preserve-3d;
    -ms-transform-style:  preserve-3d;
    transform-style:  preserve-3d;
    margin-top: 50px;
    display: inline-block;
}
body,html{
    -webkit-perspective:  200px;    
    -moz-perspective:  200px;    
    -ms-perspective:  200px;    
    perspective:  200px;    
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
    text-align: center;
}

JavaScript

$(document).ready(function(){
$(this).on('mousemove',ch);
    
var m =$('.m'), ox=m.offset().left, oy=m.offset().top; 
 
function ch(e){
    m.css({'transform': 'rotateY('+(e.pageX-ox)+'deg)'});
}});