css3d居中 |用css写立体感按钮

在普通的网页布局中，大家可以通过设置元素的margin属性为auto，就能轻松地实现元素水平居中。但是，CSS3D技术中的元素，需要在三维空间中进行定位。因此，它的居中方法也有所不同。

对于CSS3D技术的元素，大家需要使用transform属性来进行定位。使用translate3d()方法可以指定元素在三维空间中的位置。而想要让元素在三维空间中水平居中，则需要将元素向左或向右移动它自身宽度的一半。

.center {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
transform: translate3d(-50%, -50%, 0) translate3d(100px, 0, 0);
}

在上面的代码中，大家使用了translate3d()方法来指定元素在三维空间中的位置，-50%表示元素的中心点在屏幕的中心点，再通过translate3d(100px, 0, 0)向左移动它自身宽度的一半来实现水平居中。

除此之外，还可以使用flex布局来实现CSS3D元素的居中效果。使用flex布局时，只需要将父元素设为display: flex，并设置justify-content和align-items两个属性为center即可。

.parent{
display: flex;
justify-content: center;
align-items: center;
}

通过以上两种方法，大家可以轻松实现CSS3D元素的居中效果。