标签：拷贝 har round div alt scale charset translate href
transform的含义是：改变，使…变形；转换
三维变换使用基于二维变换的相同属性，如果您熟悉二维变换，你们发现3D变形的功能和2D变换的功能相当类似。CSS3中的3D变换主要包括以下几种功能函数：
含义：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。
<div class="demo_transform1"></div>
.demo_transform1{
width:300px;
height:200px;
background:#00f;
margin:50px auto;
-webkit-transform:translate(120px,0);
-moz-transform:translate(120px,0px)；
}
含义：旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”下同。
<div class="demo_transform2"></div>
.demo_transform2{
width:300px;
height:200px;
background:#00f;
margin:50px auto;
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg);
}
含义：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。
<div class="demo_transform3"></div>
.demo_transform3{
width:300px;
height:200px;
background:#00f;
margin:50px auto;
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
}
含义：倾斜；
<div class="demo_transform4"></div>
.demo_transform4{
width:300px;
height:200px;
background:#00f;
margin:50px auto;
-webkit-transform:skew(20deg);
-moz-transform:skew(20deg);
}
transform的常用属性就是这些了，下面我们借助transition的帮忙来演示一个关于css3 transform的综合实例（一个摇筛子3D效果）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/1230.css">
</head>
<body>
<div class="box">
<div class="zhuan">
<div class="bian yi"></div> <!--第一个面 -->
<div class="bian er"></div> <!--第二个面-->
<div class="bian san"></div> <!--第三个面-->
<div class="bian si"></div> <!--第四个面-->
<div class="bian wu"></div> <!--第五个面-->
<div class="bian liu"></div> <!--第六个面-->
</div>
</div>
</body>
</html>
body{
background:#864521;
}
/*视距800px*/
.box{
perspective:800px;
transform-style: preserve-3d;
margin-top:100px;
}
.zhuan{
width:200px;
height:200px;
margin:0 auto;
position: relative;
transform-style: preserve-3d;
/*设置时间为5秒*/
transition:5s;
}
/*鼠标移上之后开始旋转*/
.zhuan:hover{
transform:rotateY(3600deg) rotateX(1800deg);
}
.zhuan .bian{
width:200px;
height:200px;
position: absolute;
}
/*设置图片1,延Y轴旋转90度，延Z轴移100px*/
.yi{
transform:rotateY(90deg) translateZ(100px);
background:url(../img/1.png) no-repeat;
background-size:100%100%;
}
/*设置图片2,延Y轴旋转90度，延Z轴移-100px*/
.er{
transform:rotateY(90deg) translateZ(-100px) rotateY(180deg);
background:url(../img/2.png) no-repeat;
background-size:100%100%;
}
/*设置图片3,延X轴旋转90度，延Z轴移100px*/
.san{
transform:rotateX(90deg) translateZ(100px);
background:url(../img/3.png) no-repeat;
background-size:100%100%;
}
/*设置图片4,延X轴旋转90度，延Z轴移-100px*/
.si{
transform:rotateX(90deg) translateZ(-100px) rotateX(180deg);
background:url(../img/4.png) no-repeat;
background-size:100%100%;
}
/*设置图片5,延Z轴移100px*/
.wu{
transform:translateZ(100px);
background:url(../img/5.png) no-repeat;
background-size:100%100%;
}
/*设置图片6,延Y轴旋转180度，延Z轴移-100px*/
.liu{
transform:translateZ(-100px) rotateY(180deg);
background:url(../img/6.png) no-repeat;
background-size:100%100%;
}
今天主要向大家介绍了3D空间的3D旋转、3D位移、3D缩放功能以及应用场景。让大家对3D Transform有一个初步的了解，并能根据这些基础知识制作出自己需要的效果。
generated by haroopad
标签：拷贝 har round div alt scale charset translate href
原文地址：http://www.cnblogs.com/da-pengge/p/6385565.html
