纯css创建一个3D盒子

最新推荐文章于 2024-08-29 15:49:54 发布

小熊xl

最新推荐文章于 2024-08-29 15:49:54 发布

阅读量878

点赞数

文章标签： css

本文链接：https://blog.csdn.net/BearP/article/details/104462315

版权

这篇博客详细介绍了如何仅使用CSS来构建一个3D立方体，包括设置父元素的景深和基点，为每个立方体面定义样式，实现鼠标悬停时的旋转效果。通过一步步的实现步骤，读者可以学习到纯CSS实现3D图形的方法。

摘要由CSDN通过智能技术生成

css写一个立方体

效果图

在这里插入图片描述

实现步骤

（1）父元素设置

确定景深，景深基点位置，以及产生一个三维空间

<!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>
        *{
   padding: 0; margin: 0;}
        ul{
   list-style: none;}
        /*给ul宽高并居中*/
        #box{ 
            width: 300px; 
            height: 300px; 
            border: 1px solid black; 
            margin: 20px auto; 
            perspective: 300px;/*景深*/
            perspective-origin: right top;/*景深基点位置*/
        }
        #box ul{
   
            width: 100px; 
            height: 100px; 
            margin: 100px auto; 
            position: relative; 
            transition: all 4s;
            transform-style: preserve-3d;/*产生一个三维空间*/
            transform-origin: center center -50px;/*确定旋转中心*/
        }
    </style>
<