本帖最后由 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. |
css3之3d旋转
最新推荐文章于 2024-05-07 19:47:04 发布