css3之3d旋转

最新推荐文章于 2024-05-07 19:47:04 发布

自由职业者-毛豆豆

最新推荐文章于 2024-05-07 19:47:04 发布

阅读量585

点赞数

分类专栏： CSS3

CSS3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本帖最后由 474569696 于 2015-11-1 08:58 编辑

今天，我们来讲解一下3d旋转的相关内容。
3d对于我们来说已经并不稀奇，立体感是感官上最突出的部分。今天，我们就来解开神秘的面纱。
对于2d而言，3d对了一个维度的概念，那就是z轴的概念。2d只有水平（x）和垂直（y）轴的概念，那么对于3d来说就多了z轴，与视线水平的方向。.如图所示

了解了3d的概念，我们来了解一下css3关于3d的相关属性。
1.transform与transform-origion就不做赘述，分别是3d的载体和3d旋转的位置设置
2.perspective,规定了3d的头饰效果
3.tranform-style,规定被嵌套元素如何在 3D 空间中显示。
4.perspective-origion,规定 3D 元素的底部位置。
5.backface-visibility,定义元素在不面对屏幕时是否可见。

6.translate3d(x,y,z),相对于2d来说，多了一个z参数，当然，也可以拆开来写，无非是translate变成了translate3d，scale3d(x,y,z)，rotate3d(x,y,z,angle)也是同样的道理。
除此之外，还需要注意一点就是translatez的值就是立方体高的50%，当然这个立方体的4个侧面是一样的，这个可以根据每个面的高度的值来确定对应的translatez的值（translatez的值到底是根据旋转元素的height还是width，这个也与旋转方向有关）

下面，让我们来一起来练习吧。
先来看看效果

首先我们新建一个div元素，设置3d的相关属性
div{
         border:1px solid tan;
         transform-style: preserve-3d;//设置透视效果为3d
         backface-visibility: visible;//设置旋转的背面是否可见
         perspective: 1000;//设置透视显示效果
         height: 200px;
         position: relative;
         left: 300px;
         top: 300px;
         width: 200px;
         animation: gd 3s linear 0s  infinite ;//设置旋转动画，下节课我们在讲
      }
然后，一个立方体有六个面，所以，我们新建六个不同span元素
div span{//span的功用属性
         transform-style: preserve-3d;//设置透视效果为3d
         backface-visibility: visible;//设置旋转的背面是否可见
         perspective: 1000;//设置透视显示效果
         position: absolute;
         transform-origin: 0 0;//设置旋转的原点为0 0的位置
         left: 0;
         top: 0;
         height: 100px;
         width: 100px;
      }
//设置1-6个span元素的背景色和位置，这里的难点在于translateZ的理解。正常情况下，比如我们后去立方体的左面和右面，应该让元素沿y轴旋转90度后，沿x轴移动一定距离，就是我们的左右面，但是，这里用的是translateZ，为什么呢，相比上面的图已经给大家答案了，比如x,y,z轴的中心点也就是立方体的中心点为原点，那么translateZ的值就是立方体各个面距离原点的位置，这样理解，就可以理解为什么都是translateZ了。
      div span:nth-child(1)
      {
         background: rgba(255,255,0,0.5);
         transform:rotateY(90deg) translateZ(100px);//设置右侧面距离原点100像素，旋转90
      }
      div span:nth-child(2)
      {
         background: rgba(255,0,0,0.9);
         transform:rotateY(90deg) translateZ(0px);//设置右侧面距离原点0像素，旋转90
      }
      div span:nth-child(3)
      {
         background: rgba(0,255,0,0.9);
         transform:rotateX(-90deg) translateZ(0px);//设置上侧面距离原点100像素，旋转90
      }
      div span:nth-child(4)
      {
         background: rgba(0,12,255,0.9);
         transform:rotateX(-90deg) translateZ(100px);//设置上侧面距离原点0像素，旋转90
      }
      div span:nth-child(5)
      {
         background: rgba(120,255,0,0.9);
         transform: translateZ(0px);//设置正侧面距离原点0像素
      }
      div span:nth-child(6)
      {
         background: rgba(255,255,255,0.9);
         transform: translateZ(-100px);//设置正面底部侧面距离原点-100像素
      }
上源码，一起来测试吧。
<!DOCTYPE html>
<html>
<head>
      <meta charset="utf-8">
      <title></title>
</head>
<style>
body{
      background: #000;
}
      div{
         border:1px solid tan;
         transform-style: preserve-3d;
         backface-visibility: visible;
         perspective: 1000;
         height: 200px;
         position: relative;
         left: 300px;
         top: 300px;
         width: 200px;
         animation: gd 3s linear 0s  infinite ;
      }
      div span{
         transform-style: preserve-3d;
         backface-visibility: visible;
         perspective: 1000;
         position: absolute;
         transform-origin: 0 0;
         left: 0;
         top: 0;
         height: 100px;
         width: 100px;
         /**/

      }
      div span:nth-child(1)
      {
         background: rgba(255,255,0,0.5);
         transform:rotateY(90deg) translateZ(100px);
      }
      div span:nth-child(2)
      {
         background: rgba(255,0,0,0.9);
         transform:rotateY(90deg) translateZ(0px);
      }
      div span:nth-child(3)
      {
         background: rgba(0,255,0,0.9);
         transform:rotateX(-90deg) translateZ(0px);
      }
      div span:nth-child(4)
      {
         background: rgba(0,12,255,0.9);
         transform:rotateX(-90deg) translateZ(100px);
      }
      div span:nth-child(5)
      {
         background: rgba(120,255,0,0.9);
         transform: translateZ(0px);
      }
      div span:nth-child(6)
      {
         background: rgba(255,255,255,0.9);
         transform: translateZ(-100px);
      }
      @-moz-keyframes gd{
         from{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
         to{transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)}
      }
</style>
<body>
      <div>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
      </div>
</body>
</html>

跟我一起来练习吧！
下节课我们来讲动画ainimation.