深入可视化1.1
2D transform
css3 transform 属性允许你旋转，缩放，倾斜或平移给定元素。
平移：translate(x，y)
缩放：scale(x,y)
旋转：rotate(deg);
倾斜：skew(deg,deg);
坐标系
css3 transform 属性允许你在二维或者三维空间中直观地变换元素
用transform 时，坐标系地原点默认会移到元素的中心。
因为transform属性旋转或者倾斜元素，会变换或者倾斜的坐标系，并且该元素所有后续变换都将基于新坐标的变换。
因此，transform 属性变换函数的顺序非常重要-不同的顺序会导致不同的结果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box"></div>
</body>
<style>
body{
margin:0;
padding:0;
}
.box{
width:200px;
height:200px;
background-color:skyblue;
/* 形变 */
/* transform: translateX(100px) rotate(45deg); */
transform: rotate(45deg) translate(100px);
}
</style>
</html>
transform-origin
transform-origin ：变形的原点（即坐标系0，0点）
一个值：
设置x轴的原点，y轴的默认值50%
两个值：
设置x轴，y轴和z轴的原点
必须是,,或者left,center,right,top,bottom关键字中的一个
left,center,right,top,bottom关键字
length:从左上角开始计算
百分比：参考元素本身大小
3D旋转-rotationZ,rotationX,rotationY
rotate(x,y,z,deg);
3D透视perspective
定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视的效果
z>0的三维元素比正常的大，而z<0时比正常的小，大小程度由该属性值决定
值个数
只有一个值，表示观察者距离z=0的平面距离和none
必须
none没有应用perspective 样式的默认值
length:定观察者距离z=0 平面的距离（如右图的d的距离，单位px)
透视的两种方式：
1.在父元素上定义CSS透视属性
2.如果它是子元素或单元素子元素，可以使用persective
一个3d正方体案例
<!-- 制作一个3D正方体 -->
<!-- 绘制正方体的侧面图 -->
<!-- 绘制正方体六面 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">div
<div class="item top">1</div>
<div class="item bottom">2</div>
<div class="item front">3</div>
<div class="item back">4</div>
<div class="item left">5</div>
<div class="item right">6</div>
</div>
</body>
<style>
body {
margin: 0;
padding: 100px;
}
.box {
position: relative;
width: 100px;
height: 100px;
background-color: red;
transform-style: preserve-3d;
transform: rotateX(-33.5deg) rotateY(45deg);
}
.top{
background-color: rgba(255,0, 0, 0.4);
transform: rotateX(90deg) translateZ(50px);
}
.bottom{
background-color: rgba(0,255, 0, 0.4);
transform: rotateX(-90deg) translateZ(50px);
}
.front{
background-color: rgba(100,100, 100, 0.4);
transform: translateZ(50px);
}
.back{
background-color: rgb(0, 255, 255,0.4);
transform: rotateY(180deg) translateZ(50px);
}
.left{
background-color: rgb(255, 255, 0,0.4);
transform:rotateY(-90deg) translateZ(50px)
}
.right{
background-color: rgba(255, 0, 255, 0.4);
transform:rotateY(90deg) translateZ(50px)
}
.item{
position: absolute;
top:0;
left: 0;
height:100%;
width: 100%;
}
</style>
</html>
