C3中的各种转换详解
目录
- 转换
- 2D转换
- 移动
- 旋转
- 2D转换的中心点
- 缩放
- 2D转换的复合写法
- 3D转换
- 移动
- 透视
- 旋转
- 移动
- 3D呈现
转换（transform）
-
转换( transform )是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。转换通常要和过渡（transition）搭配使用，这样的转换更具有连续性，观赏性更强。
-
属性：
- 移动：translate
- 旋转：rotate
- 缩放：scale
-
分类：
- 2D转换
- 3D转换
2D转换
- 2D转换之移动
- 2D转换之旋转
- 设置转换中心点
- 2D转换之缩放
一、2D转换之移动（translate）
-
2D转换中的移动，类似于定位，它可以改变元素在页面中的位置。
-
translate最大的优点是不会影响到其他元素的位置，如果translate中的参数写成百分比，则是相对一自身元素移动的。
-
语法：
transform: translateX(n); 在X轴上移动的距离。 transform: translateY(n); 在Y轴上移动的距离。 也可以合起来写。 transform: translate(X,Y); transform: translate(50%,50%); 在X轴和Y轴上移动自身宽度和高度的50% -
如下代码给定了两个宽高200像素的div,给第一个div添加移动，X轴移动30像素，Y轴移动30像素。
没有添加移动属性 <style> div { width: 200px; height: 200px; background-color: pink; } div:last-child { background-color: purple; } </style> <div></div> <div></div>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
div:last-child {
background-color: purple;
}
添加移动属性
div:first-child {
transform: translate(30px, 30px);
}
</style>
<div></div>
<div></div>
二、2D转换之旋转（rotate）
-
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
-
语法：
transform: rotate(旋转度数); -
注：
- rotate里面写旋转的度数，单位是deg(度)，例如rotate(90deg);
- 当旋转角度为正值时，旋转方向为顺时针旋转；当旋转角度为负值时，旋转方向为逆时针。
- 默认的旋转中心点时元素的中心点
-
如下代码的效果为：当鼠标悬停在图片上时，图片会顺时针旋转360°，为了更具有动画效果，添加了过渡效果。
<style> img { width: 200px; height: 200px; border-radius: 50%; border: 5px solid #ccc; /* 过渡 */ transition: all 0.3s; } /* 顺时针旋转360° */ img:hover { transform: rotate(360deg); } </style> <img src="../1613787740511.jpg" alt="">
2D转换的中心点（transform-origin）
-
语法：
transform-origin: x y; -
参数可以百分比、像素或者是方位名词
-
x y 默认转换的中心点是元素的中心点（50% 50%）
-
可以给x y 设置像素或者方位名词（top bottom left right center）
三、2D转换之缩放（scale）
-
缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。
-
语法：
transform: scale(x,y); 其中x y 表示缩放倍数 transform:scale(1,1)︰宽和高都放大一倍，相对于没有放大 transform:scale(2,2)∶宽和高都放大了2倍 transform:scale(2)∶只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2) transform:scale(0.5,0.5):缩小 -
sacle缩放的特点: 可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其它的盒子。
2D转换的复合写法
-
如果涉及多个转换同时使用，那么可以复合来写。
-
语法：
transform: translate() rotate() scale(); -
转换的顺序会影响转换的效果，例如：先旋转会改变坐标轴的方向。
-
当我们同时有位移和其他属性的时候，要将位移放到最前面,不然会出现意料之外的情况。
3D转换
3D转换之移动（translate3d）
-
3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向。
-
语法：
translform:translateX(100px); 在x轴上移动移动100px translform:translateY(100px); 在Y轴上移动100px translform:translateZ(100px); 在Z轴上移动100px 当然也可以复合来写： transform:translate3d(x,y,Z); 其中x、y、z分别指在x y z 轴上移动的距离 -
如下代码是，当鼠标移动到div上的时候，给它设置3D移动。
div { width: 100px; height: 100px; background-color: #c0ffc6; transition: all .5s; } div:hover { transform: translate3d(400px, 100px, 100px); } <div></div>
效果如下：
- 有人可能会问了，这和2d移动有啥区别呢？当然，这个例子就根本没有真正展示出3d的视角，？？？什么，博主骗人？？？当然没有，你想，我们在3d世界中都有一种直观感受近大远小，那么我们既然是3d移动，那肯定要有这种感觉才行啊，因此，我们引入了一个概念，叫透视-perspective。
透视（perspective）
-
它的作用就是在2D的平面产生近大远小的视觉。但这个近大远小的效果是二维的，没看懂不着急，下面看例子。
-
注：
- 如果想要在网页产生3D效果需要透视 (理解成3D物体投影在2D平面内)。
- 透视我们也称为视距 :视距就是人的眼睛到屏幕的距离
- 透视的单位是像素
- 透视写在被观察元素的父盒子上面的
-
还是上面的例子，我现在给div的父元素加上透视，因为我body里面只有div,所以div的父元素就是body,因此给body加透视。
body { /* 透视，像素大小自己把握 */ perspective: 200px; } div { width: 100px; height: 100px; background-color: #c0ffc6; transition: all .5s; } div:hover { transform: translate3d(400px, 100px, 100px); } <div></div>
效果如下：
3D转换之旋转（rotate3d）
-
3D旋转指可以让元素在三维平面内沿着x轴, y轴, z轴或者自定义轴进行旋转。
-
语法：
transform:rotateX(90deg); 沿着x轴正方向旋转90° transform:rotateY(90deg); 沿着y轴正方向旋转90° transform:rotateZ(90deg); 沿着Z轴正方向旋转90° 顺时针 -
说了这么半天，那怎么区分正方向呢？
-
注：我们电脑中是以电脑屏幕的左上角为坐标原点，水平向右为X轴正方向，与X轴垂直向下为Y轴正方向，垂直于屏幕向外为Z轴正方向。
左手法则：张开左手，让大拇指指向坐标轴的正方向，四指弯曲的方向为正方向。例如：顺时针方向为Z轴的正方向
-
-
当然3D旋转也可以复合来写：
-
transform:rotate3d(x,y,z,90deg); 沿着自定义轴旋转90deg transform: rotate3d(1, 0, 0, 90deg); 在X轴方向旋转90° transform: rotate3d(0, 1, 0, 90deg); 在y轴方向旋转90° transform: rotate3d(1, 1, 0, 90deg); 在X轴和y轴正方向的角平分线方向旋转90° 这里涉及矢量的合成，因为在X轴和Y轴上要同时旋转，X轴和Y轴矢量合成后为X轴和y轴正方向的角平分线。 -
案例：盒子沿着X轴正方向旋转45°
body { perspective: 300px; } div { width: 200px; height: 200px; margin: 100px auto; background-color: #3be840; transition: all 1s; } div:hover { transform: rotateX(45deg); } <div></div>
【3D呈现（transfrom-style）】
-
有时我们使用多个对象进行旋转的时候，发现一个奇怪的现象，明明设置了旋转，但旋转的时候，子元素的旋转属性却消失了，不起作用，这是应为我们没有设置3D呈现（transfrom-style），而这个属性默认设置是flat，也就是不开启的意思，所以我们必须显式地给父元素设置，才能让子元素开启三维立体环境。
-
语法：
transform-style: flat; 子元素默认不开启3d立体空间 transform-style: preserve-3d; 子元素开启立体空间 -
注意：这个属性是设置给父元素的，但是影响的是子元素。
-
示例：
body { perspective: 500px; } .box { position: relative; width: 200px; height: 200px; margin: 100px auto; transition: all 1s; } .box:hover { transform: rotateY(60deg); } .box div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: pink; } .box div:last-child { background-color: purple; transform: rotateX(60deg); } <div class="box"> <div></div> <div></div> </div>
上面的代码并没有给 .box 设置3D呈现。效果如下：
body {
perspective: 500px;
}
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 1s;
/* 让子元素保持3d立体空间环境 必须是直接父元素加，间接父元素加上不生效 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(60deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
.box div:last-child {
background-color: purple;
transform: rotateX(60deg);
}
<div class="box">
<div></div>
<div></div>
</div>
添加3D呈现效果如下：
