html 3d 效果实现原理,实例详解HTML5、CSS3实现3D转换效果

在css二维的世界里，我们可以对元素设置宽高、位置、旋转、背景等等。在css三维世界里，扩展出了一个z轴，这个z轴垂直于屏幕并指向外面。下面这篇文章主要给大家介绍了利用HTML5+CSS3实现3D转换效果的相关资料，需要的朋友可以参考，希望能帮助到大家。

首先，我们来了解一下3d的坐标系，x轴在屏幕上为水平方向，y轴为垂直方向，而z轴为垂直于屏幕的方向。

不理解的话可以参考定位属性的z-index属性，那个在某种意义上就是让元素在z轴的移动。

在2d转换模块中我们研究了rotateX()和rotateY()方法，就是绕x轴和y轴旋转，这其实就是3d模块的一种表现，当然要看到近大远小的3d效果，还需要在父元素上添加透视属性：transform:perspective(500px);值为透视点到元素的距离，具体概念请看美术透视教学。。。。

多说无益，上代码：

Title

p{

width: 200px;

height: 200px;

margin: 0 auto;

}

.p1{

margin-top: 100px;

transform:perspective(500px) rotatey(0deg);

position: relative;

border:1px solid #000000;

background-color: #ff0000;

}

.p1 p{

transform:rotatey(45deg);

position: absolute;

font-size: 80px;

line-height: 200px;

text-align: center;

top: 0;

left: 0;

}

1

效果图：

但是，你会发现当父元素转到90度的时候元素消失了，这就说明元素是没有厚度的。说明元素虽然具有了近大远小的透视属性，但本质上仍是2d的。

这是你需要添加transform-style:preserve-3d;样式来让元素在3d空间中转换。这样，元素就处在了3维的空间里，当父元素旋转90度，仍能看到里面的子元素。

示例代码：

Title

p{

width: 200px;

height: 200px;

margin: 0 auto;

}

.p1{

margin-top: 100px;

transform:perspective(500px) rotatey(0deg);

transform-style:preserve-3d;

position: relative;

border:1px solid #000000;

}

.p1 p{

background-color: #ff0000;

transform:rotatey(45deg);

position: absolute;

font-size: 80px;

line-height: 200px;

text-align: center;

top: 0;

left: 0;

}

1

效果图：

上面，我们对3d转换模块有了一个初步的了解，下面我们一起做一个正方体，来整理一下3d模块的知识。

一步步来做着写太过麻烦，我就将过程写在代码的注释里，小伙伴们请见谅。

代码：

转换模块-正方体

*{

margin: 0;

padding: 0;

/*去除默认边距*/

}

ul{

width: 200px;

height: 200px;

border: 1px solid #000;

box-sizing: border-box;

margin: 100px auto;

position: relative;

/*修改基本样式*/

transform: rotateY(45deg) rotateX(45deg);

/*旋转看看效果*/

transform-style: preserve-3d;

/*将父元素设置为3d空间*/

}

ul li{

list-style: none;

width: 200px;

height: 200px;

font-size: 60px;

text-align: center;

line-height: 200px;

position: absolute;

left: 0;

top: 0;

/*修改基本样式*/

}

ul li:nth-child(1){

background-color: red;

transform: translateX(-100px) rotateY(90deg);

/*将第一个l向左移动100像素，然后绕y轴旋转90度，形成左边的面*/

}

ul li:nth-child(2){

background-color: green;

transform: translateX(100px) rotateY(90deg);

/*将第一个2向右移动100像素，然后绕y轴旋转90度*，形成右边的面*/

}

ul li:nth-child(3){

background-color: blue;

transform: translateY(-100px) rotateX(90deg);

/*将第一个3向上移动100像素，然后绕x轴旋转90度，形成上面的面*/

}

ul li:nth-child(4){

background-color: yellow;

transform: translateY(100px) rotateX(90deg);

/*将第一个4向下移动100像素，然后绕x轴旋转90度*/

}

ul li:nth-child(5){

background-color: purple;

transform: translateZ(-100px);

/*将第一个5向后移动100像素，形成后面的面*/

}

ul li:nth-child(6){

background-color: pink;

transform: translateZ(100px);

/*将第一个l向前移动100像素，形成前面的面*/

}

• 1
• 2
• 3
• 4
• 5
• 6

效果图：

这个方法比较好理解，理解了之后请看下一个。

代码在下面：

Title

p{

width: 200px;

height: 200px;

margin: 0 auto;

/*修改基本样式*/

}

.p1{

margin-top: 100px;

transform: perspective(400px) rotatex(0deg) rotatey(0deg);

/*拥有近大远小透视效果*/

transform-style: preserve-3d;

/*设置为3d空间*/

position: relative;

border:1px solid #000000;

animation: xuanzhuan 5s cubic-bezier(0.0,0.0,0.0,0.0) infinite forwards;

/*旋转动画*/

}

.p1 p{

position: absolute;

font-size: 80px;

line-height: 200px;

text-align: center;

top: 0;

left: 0;

/*内部样式*/

}

.p1_1{

transform: translatez(100px);

background-color: red;

/*向前移动100像素，作为最前面的面*/

}

.p1_2{

transform: rotatex(90deg) translatez(100px);

background-color:green;

/*绕x轴旋转90度，在z轴正方向移动100像素，作为上面的面*/

/*注：旋转时坐标系会跟着一起旋转，z轴原来是垂直屏幕向外的，绕x轴旋转90度以后就是在屏幕上向上的方向*/

}

.p1_3{

transform: rotatex(180deg) translatez(100px);

background-color: blue;

/*绕x轴旋转180度，这时z轴垂直屏幕向内，在z轴正方向移动100像素，作为后面的面*/

}

.p1_4{

transform: rotatex(270deg) translatez(100px);

background-color: purple;

/*绕x轴旋转270度，这时z轴向下，在z轴正方向移动100像素，作为下面的面*/

}

.p1_5{

transform: rotatey(90deg) translatez(100px);

background-color: pink;

/*绕y轴旋转90度，这时z轴向右，在z轴正方向移动100像素，作为右面的面*/

}

.p1_6{

transform: rotatey(270deg) translatez(100px);

background-color: yellow;

/*绕y轴旋转90度，这时z轴向左，在z轴正方向移动100像素，作为左面的面*/

}

@-webkit-keyframes xuanzhuan{

from{

transform:perspective(400px) rotatex(0deg);

}

to{

transform:perspective(400px) rotatex(360deg);

}

}

.p1:hover{

transform: perspective(400px) scale(1.5);

animation: xuanzhuan 5s cubic-bezier(0.0,0.0,0.0,0.0) infinite paused forwards;

/*有hover事件是动画暂停*/

}

1

2

3

4

5

6

效果图：

这种写法只要理解了，写起来会更加的方便，而且不不用去考虑转换的角度不对会导致内容是反的，所以推荐这一种写法。当然这种写法在x轴和y轴一起旋转是也会造成内容的反转。

相关推荐：