3D立体模型盒子旋转特效

在下河南彭于晏

于 2023-03-15 20:20:19 发布

阅读量465

点赞数

文章标签： 3d css3 css

本文链接：https://blog.csdn.net/da_shuai_bi_a/article/details/129566797

版权

该文介绍了如何使用CSS3创建一个3D立方体，并通过设置transform-style和transform属性添加动画效果，使其能够进行转动。立方体由六个平面构成，通过调整translate和rotate属性实现各个面的位置和旋转，最后应用关键帧动画@keyframes实现立方体的循环旋转效果。

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

在这里插入图片描述
这是一个3D的立方体盒子给盒子添加动画属性使其可以转动。
原理：原理其实很简单我们看到的一个立方体其实就是靠六个平面搭建起来的

一、立方体的创建

首先要给中心添加一个transform-style: preserve-3d;使其形成一个3D空间再稍微转动一些角度使我们能够更直观的看

六张正方形块堆叠在正中心位置往前走边长的一般就形成了前面这一面，往后走边长的一半就是它的对面，往左移动一半然后旋转个90deg，就是左边的一面，依次类推，组成一个立方体(未配图，可参考代码自行研究)

二、立方体的实现

立方体的实现与旋转相册的方法大体相同，但有两种方法，其一是：使四个侧面向外移动自身宽高的一半，再旋转90°；第二种方法是：四个侧面向不同方向移动自身宽度的距离，后旋转90°。立方体初始状态搭建好之后，使其循环旋转

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    *{
   
        margin: 0;
        padding: 0;
    }
    .box{
   
        width: 400px;
        height: 400px;
        position: fixed;
        left:0;right:0;
        top:0;bottom:0;
        margin:auto;
        transform-style: preserve-3d;
        transform: