您的位置：首页 > Web前端 > CSS

CSS3——transform学习

2015-09-01 20:30 183 查看

CSS动画效果可以使用transform和Animation，前者较简单，先学习前者。

transform有几个基本变换，平移、旋转、缩放、扭曲

一、translate平移

有translate2d和translate3d之分，实际项目中可以只考虑3d，因为可以开启3d硬件加速。

transform：translate3d(Xpx,Ypx,Zpx)

即各自向各方向平移多少像素，单位px

二、rotate旋转

实际也可以只考虑3d，即rotate3d

但是rotate3d只能对各轴设定相同的值，即transform：rotate3d(1,1,0,45deg)，前三个参数是布尔值，表示当前轴是否旋转，不能单独指定旋转角度。

可以transform：rotate3d(1,0,0,45deg) rotate3d(0,1,0,90deg) rotate3d(0,0,1,30deg) 对各轴设定选择角度

三、scale缩放

四、skew扭曲

平移和选择的demo如下

<html>
<head>
<title>transform demo</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
body{
overflow: hidden;
}
#content{
-webkit-perspective: 500;
-webkit-perspective-origin:50% 50%;
width: 100%;
height: 100%;
}
#test{
width: 280px;
height: 397px;
margin: 0 auto;
background-image: url(bg.png);
background-color: #eee;
transition:all 1s;
}
#tool{
width: 300px;
height: 200px;
margin: 0 auto;
text-align: center;
padding: 20px;
}
</style>
<script>
function getlate(){
var lateX=$("input[name='lateX']").val();
$("input[name='lateX']").next('span').html(lateX+"px");

var lateY=$("input[name='lateY']").val();
$("input[name='lateY']").next('span').html(lateY+"px");

var lateZ=$("input[name='lateZ']").val();
$("input[name='lateZ']").next('span').html(lateZ+"px");

$("#test").css("transform","translate3d("+lateX+"px,"+lateY+"px,"+lateZ+"px)");
}
function getrotate(){
var rotateX=$("input[name='rotateX']").val();
$("input[name='rotateX']").next('span').html(rotateX+"deg");

var rotateY=$("input[name='rotateY']").val();
$("input[name='rotateY']").next('span').html(rotateY+"deg");

var rotateZ=$("input[name='rotateZ']").val();
$("input[name='rotateZ']").next('span').html(rotateZ+"deg");

$("#test").css("transform","rotate3d(1,0,0,"+rotateX+"deg) "+"rotate3d(0,1,0,"+rotateY+"deg) "+"rotate3d(0,0,1,"+rotateZ+"deg)");
}
$(function(){
getlate();
getrotate();

});
</script>
</head>
<body>
<div id="content">
<div id="test"></div>
<div id="tool">
X轴平移<input type="range" name="lateX" min="-100" max="100" value="0" onchange="getlate();"/><span></span><br />
Y轴平移<input type="range" name="lateY" min="-100" max="100" value="0" onchange="getlate();"/><span></span><br />
Z轴平移<input type="range" name="lateZ" min="-100" max="100" value="0" onchange="getlate();"/><span></span><br />
X轴旋转<input type="range" name="rotateX" min="-180" max="180" value="0" onchange="getrotate();"/><span></span><br />
Y轴旋转<input type="range" name="rotateY" min="-180" max="180" value="0" onchange="getrotate();"/><span></span><br />
Z轴旋转<input type="range" name="rotateZ" min="-180" max="180" value="0" onchange="getrotate();"/><span></span>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航