用HTML加css制作立体方块,CSS3 三维变形实现立体方块特效源码

前言

三维变换使用基于二维变换的相同属性，如果您熟悉二维变换，你们发现3D变形的功能和2D变换的功能类似。3D变形与2D变形的最大不同就在于其参考的坐标轴不同，2D变形的坐标轴是平面的，只存在X轴和Y轴，而3D变形的坐标轴则是X、Y、Z三条轴组成的立体空间，X轴正向是朝右，Y周正向是朝下，Z轴正向是朝屏幕外。

静态效果图如下：

实例代码

CSS3三维变形

* {

margin: 0;

padding: 0;

}

.box {

position:relative;

top: 100px;

width:300px;

height: 300px;

margin: 0 auto;

background-color: #ccc;

/*

透视效果

越大透视距离越平面，反之亦然

*/

perspective:800px;

}

.content {

/*3d视图*/

transform-style: preserve-3d;

/*过度动画*/

transition: all 3s linear;

width:200px;

height: 200px;

position: absolute;

top: 50px;

left: 50px;

}

/*

经过顺时针旋转

*/

.content:hover {

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

}

/*

方块公共样式

*/

.side {

position: absolute;

height: 200px;

width: 200px;

border: 2px solid #000;

background: rgba(0,0,0,0.3);

color: #fff;

line-height: 200px;

font-size: 30px;

font-weight: bold;

text-align: center;

text-shadow: 0 -1px 0 rgba(0,0,0,0.2);

}

/*

前

*/

.side1 {

transform: translateZ(100px);

}

/*

后

*/

.side2 {

transform: rotateX(180deg) translateZ(100px);

}

/*

左

*/

.side3 {

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

}

/*

右

*/

.side4 {

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

}

/*

上

*/

.side5 {

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

}

/*

下

*/

.side6 {

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

}

1

2

3

4

5

6

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。