如何使用CSS3实现3D效果

最新推荐文章于 2025-06-09 09:42:03 发布

原创

最新推荐文章于 2025-06-09 09:42:03 发布 · 3.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#CSS3 #动画 #3D效果 #CSS #立方体

本文介绍了如何使用CSS3创建3D立方体，包括设置perspective、transform-style属性，以及利用translateZ和rotate进行3D转换。通过CSS3关键帧动画和hover伪类，实现了立方体在鼠标悬停时的旋转效果。此外，还提及了调整面大小和添加图片以丰富3D形状的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

首先需要在最外层的div设置perspective:800px;的查看位置视图，这里建议在1000px左右，不然可能会出现拉伸变型。
使用transform-style:preserve-3d;进行3D转换，立方体需要设置6个面，通过相对定位层叠在一起，最好给每一个面都设置边框和背景颜色透明以方便查看。
定位立方体6个面的transform方法有translateZ和rotate，

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

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

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

代码样式如下：

<!doctype
html>
<html>
<head>
<meta
charset="utf-8">
<title>实现立方体效果</title>
<style>
       body{ 
              margin: 0; 
       }
       #outside{ 
              perspective:800px;
              perspective-origin:50% 50%; 
       } 
       #outside .cubic{ 
              position:relative; 
              transform-style:preserve-3d; 
              width:206px; 
              height:206px; 
              margin:200px auto 0;