如何使用CSS3实现3D效果

一、 设置一个立方体非常简单

  1. 首先需要在最外层的div设置perspective:800px;的查看位置视图,这里建议在1000px左右,不然可能会出现拉伸变型。

  2. 使用transform-style:preserve-3d;进行3D转换,立方体需要设置6个面,通过相对定位层叠在一起,最好给每一个面都设置边框和背景颜色透明以方便查看。

  3. 定位立方体6个面的transform方法有translateZ和rotate,

translateZ即垂直于屏幕的轴,通过调整像素大小来实现远近效果,

rotate的方法有两个:rotateY沿Y轴旋转和rotateX沿X轴旋转。

  1. 这里还设置了CSS3的关键帧动画,使用动画暂停和hover伪类启动的方法来实现鼠标移入立方体旋转的效果,这个方法可以方便地在浏览器上调整各面的位置以达到更好的效果。

代码样式如下:





实现立方体效果



实现的效果
如何使用CSS3实现3D效果_第1张图片
二、调整立方体的面大小或数量,添加图片的方法就可以得到
如何使用CSS3实现3D效果_第2张图片

你可能感兴趣的:(前端,CSS,CSS3)