关于css3的transform，做了一个demo，上代码
html：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <link rel="stylesheet" href="practice.css" type="text/css" > 5 <script src="../js/jquery-2.1.1.min.js" type="text/javascript" ></script> 6 <meta charset="UTF-8"> 7 <title>transform</title> 8 </head> 9 <body> 10 <div class="container"> 11 <div class="out"> 12 <ul> 13 <li class="in"><img src=‘1.jpg‘ /></li> 14 <li class="in"><img src=‘2.jpg‘ /></li> 15 <li class="in"><img src=‘3.jpg‘ /></li> 16 <li class="in"><img src=‘4.jpg‘ /></li> 17 <li class="in"><img src=‘5.jpg‘ /></li> 18 </ul> 19 </div> 20 <div class="control"> 21 <div class=‘detail‘> 22 <span>transform-style: flat:<input type="radio" name=‘style‘ value=‘flat‘/> preserve-3d:<input type="radio" name=‘style‘ value=‘preserve-3d‘ /></span> 23 <p>你选择transform_style为<span></span></p> 24 </div> 25 <div class=‘detail‘> 26 <span>perspective:</span><input name=‘perspective‘ type="range" min=‘0‘ max=‘800‘ value=‘0‘ step=‘1‘/> 27 <p>你选择的perspective值为<span></span></p> 28 </div> 29 <div class=‘detail‘> 30 <span>translateX:</span><input name=‘translateX‘ type="range" min=‘0‘ max=‘50‘ value=‘0‘ step=‘1‘/> 31 <p>你选择的translateX值为<span></span></p> 32 </div> 33 <div class=‘detail‘> 34 <span>translateY：</span><input name=‘translateY‘ type="range" min=‘0‘ max=‘50‘ value=‘0‘ step=‘1‘/> 35 <p>你选择的translateY值为<span></span></p> 36 </div> 37 <div class=‘detail‘> 38 <span>translateZ：</span><input name=‘translateZ‘ type="range" min=‘0‘ max=‘50‘ value=‘0‘ step=‘1‘/> 39 <p>你选择的translateZ值为<span></span></p> 40 </div> 41 <div class=‘detail‘> 42 <span>rotateX：</span><input name=‘rotateX‘ type="range" min=‘0‘ max=‘180‘ value=‘0‘ step=‘1‘/> 43 <p>你选择的rotateX值为<span></span></p> 44 </div> 45 <div class=‘detail‘> 46 <span>rotateY：</span><input name=‘rotateY‘ type="range" min=‘0‘ max=‘180‘ value=‘0‘ step=‘1‘/> 47 <p>你选择的rotateY值为<span></span></p> 48 </div> 49 <div class=‘detail‘> 50 <span>rotateZ：</span><input name=‘rotateZ‘ type="range" min=‘0‘ max=‘180‘ value=‘0‘ step=‘1‘/> 51 <p>你选择的rotateZ值为<span></span></p> 52 </div> 53 </div> 54 </div>
css比较简单，就不上了
js:
<script>
$(function(){
var transform_style=‘flat‘,translateX=‘0px‘,translateY=‘0px‘,translateZ=‘0px‘,perspective=‘0px‘,rotateX=0,rotateY=0,rotateZ=0;
$("input").on(‘change‘,function(){
if($(this).attr(‘name‘)===‘style‘){
if($(this).is(":checked")){
transform_style=$(this).val();
$("ul").css({"transform-style":transform_style});
$(this).parent().siblings(‘p‘).find(‘span‘).text(transform_style) ;
}
}else{
var change=$(this).attr(‘name‘);
var val=$(this).val();
switch(change){
case ‘perspective‘:
perspective=val+‘px‘;
break;
case ‘translateX‘:
translateX=val+‘px‘;
break;
case ‘translateY‘:
translateY=val+‘px‘;
break;
case ‘translateZ‘:
translateZ=val+‘px‘;
break;
case ‘rotateX‘:
rotateX=val;
break;
case ‘rotateY‘:
rotateY=val;
break;
case ‘rotateZ‘:
rotateZ=val;
break;
}
$(this).siblings(‘p‘).find(‘span‘).text(val);
$(‘.in‘).css({‘-webkit-transform‘:‘perspective(‘+perspective+‘) translate3d(‘+translateX+‘,‘+translateY+‘,‘+translateZ+‘) rotateX(‘+rotateX+‘deg) rotateY(‘+rotateY+‘deg) rotateZ(‘+rotateZ+‘deg)‘})
}
})
})
</script>
时间： 2024-08-07 16:40:36