什么C3转换还可以这样玩？？？用CSS3实现2D转换、3D转换、3D呈现，详细总结及案例演示。

阿年、嗯啊

发布于 2021-04-29 15:58:54

83900

代码可运行

文章被收录于专栏：阿年的数据梦阿年的数据梦

运行总次数：0

代码可运行

转换（transform）

转换( transform )是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。转换通常要和过渡（transition）搭配使用，这样的转换更具有连续性，观赏性更强。
属性：
1. 移动：translate
2. 旋转：rotate
3. 缩放：scale
分类：
1. 2D转换
2. 3D转换

2D转换

2D转换之移动
2D转换之旋转
- 设置转换中心点
2D转换之缩放

一、2D转换之移动（translate）

<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呈现效果如下：

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021/02/20 ，如有侵权请联系 cloudcommunity@tencent.com 删除

图像处理

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

图像处理

css

登录后参与评论

0 条评论

热度