当前位置： 首页 > article >正文

【css酷炫效果】纯CSS实现立体旋转立方体

article 2026/3/5 22:14:11

【css酷炫效果】纯CSS实现立体旋转立方体

  • 缘
  • 创作背景
  • html结构
  • css样式
  • 完整代码
  • 效果图

想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90492014

缘

创作随缘，不定时更新。

创作背景

刚看到csdn出活动了，赶时间，直接上代码。

html结构


<div class="cube-system"><div class="cube-container"><div class="cube-face front">前面</div><div class="cube-face back">后面</div><div class="cube-face top">上面</div><div class="cube-face bottom">下面</div><div class="cube-face left">左面</div><div class="cube-face right">右面</div></div>
</div>

css样式

.cube-system {/* 全局透视 */perspective: 800px;width: 300px;height: 300px;margin: 200px auto;
}.cube-container {position: relative;width: 200px;height: 200px;transform-style: preserve-3d;animation: rotate 12s infinite linear;transition: 0.5s;
}/* 悬停暂停动画 */
.cube-container:hover {animation-play-state: paused;
}/* 立方体面通用样式 */
.cube-face {position: absolute;width: 200px;height: 200px;border: 2px solid #fff;background: rgba(0, 150, 255, 0.9);font-size: 40px;display: flex;align-items: center;justify-content: center;box-shadow: 0 0 30px rgba(0,0,0,0.2);
}/* 各面定位 */
.front  { transform: translateZ(100px); }
.back   { transform: rotateY(180deg) translateZ(100px); }
.top    { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }
.left   { transform: rotateY(-90deg) translateZ(100px); }
.right  { transform: rotateY(90deg) translateZ(100px); }@keyframes rotate {0%   { transform: rotateX(0) rotateY(0); }50%  { transform: rotateX(360deg) rotateY(180deg); }100% { transform: rotateX(720deg) rotateY(360deg); }
}

完整代码

<!DOCTYPE html>
<html lang="en"> 
<head><title>页面特效</title>
<style>
.cube-system {/* 全局透视 */perspective: 800px;width: 300px;height: 300px;margin: 200px auto;
}.cube-container {position: relative;width: 200px;height: 200px;transform-style: preserve-3d;animation: rotate 12s infinite linear;transition: 0.5s;
}/* 悬停暂停动画 */
.cube-container:hover {animation-play-state: paused;
}/* 立方体面通用样式 */
.cube-face {position: absolute;width: 200px;height: 200px;border: 2px solid #fff;background: rgba(0, 150, 255, 0.9);font-size: 40px;display: flex;align-items: center;justify-content: center;box-shadow: 0 0 30px rgba(0,0,0,0.2);
}/* 各面定位 */
.front  { transform: translateZ(100px); }
.back   { transform: rotateY(180deg) translateZ(100px); }
.top    { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }
.left   { transform: rotateY(-90deg) translateZ(100px); }
.right  { transform: rotateY(90deg) translateZ(100px); }@keyframes rotate {0%   { transform: rotateX(0) rotateY(0); }50%  { transform: rotateX(360deg) rotateY(180deg); }100% { transform: rotateX(720deg) rotateY(360deg); }
}
</style></head>
<body><div class="cube-system"><div class="cube-container"><div class="cube-face front">前面</div><div class="cube-face back">后面</div><div class="cube-face top">上面</div><div class="cube-face bottom">下面</div><div class="cube-face left">左面</div><div class="cube-face right">右面</div></div>
</div></body>
</html>

效果图

在这里插入图片描述

相关文章：

【css酷炫效果】纯CSS实现立体旋转立方体

【css酷炫效果】纯CSS实现立体旋转立方体 缘创作背景html结构css样式完整代码效果图 想直接拿走的老板&#xff0c;链接放在这里&#xff1a;https://download.csdn.net/download/u011561335/90492014 缘 创作随缘&#xff0c;不定时更新。 创作背景 刚看到csdn出活动了&am…...

编程日记 2026/2/17 9:31:55

Android Fresco 框架兼容模块源码深度剖析(六)

Android Fresco 框架兼容模块源码深度剖析 一、引言 在 Android 开发的多元环境中&#xff0c;兼容性是衡量一个框架优劣的重要指标。Fresco 作为一款强大的图片加载框架&#xff0c;其兼容模块在确保框架能在不同 Android 版本、不同设备和不同图片格式下稳定运行方面发挥着…...

编程日记 2026/2/21 5:06:13

ABSD基于架构的软件设计

基于架构的设计&#xff08;ABSD&#xff09;Architecture-Based Software Design是一种软件设计方法&#xff0c;强调软件架构设计应该由商业、质量和功能需求共同驱动。这种方法允许设计活动在明确项目总体功能框架的前提下开始&#xff0c;并且需求抽取和分析活动应与设计活…...

编程日记 2026/2/14 13:57:19

LLM中lora的梯度更新策略公式解析

LLM中lora的梯度更新策略公式解析 目录 LLM中lora的梯度更新策略公式解析区别如何使用LoRA代码中的参数更新方式二阶导数（如右侧公式关联的Fisher信息）的作用区别 定义与理论来源： 左公式 F ( w i ) = 1 n...

编程日记 2026/3/1 16:14:07

开源数据仓库全解 — 从原理到实践

&#x1f3af; 一、什么是数据仓库&#xff1f; 数据仓库&#xff08;Data Warehouse&#xff0c;简称 DW&#xff09;是面向分析和决策的专门数据存储系统&#xff0c;旨在整合来自多个源的数据&#xff0c;支持复杂查询和大规模分析任务。 特点包括&#xff1a; 面向主题&…...

编程日记 2026/2/16 15:21:40

Mac下Ollama安装全攻略：开启本地大模型之旅

文章目录 Mac下Ollama安装全攻略&#xff1a;开启本地大模型之旅一、Ollama 是什么功能特点优势应用场景 二、安装前准备&#xff08;一&#xff09;系统要求&#xff08;二&#xff09;硬件要求 三、下载安装包&#xff08;一&#xff09;官网下载&#xff08;二&#xff09;其…...

编程日记 2026/2/19 22:40:26

线程大乱斗：从入门到精通，解锁Java并发编程的终极秘籍

目录 什么是线程&#xff1f; jave创建线程方式有几种&#xff1f; 线程中常用的方法 线程状态 多线程 解决线程安全问题 线程通信 何为并发编程&#xff1f; 并发执行和并行执行 线程的三个主要问题&#xff1a; 1、不可见性&#xff1a; 2、乱序性&#xff1a; …...

编程日记 2026/3/1 7:44:31

Web3游戏行业报告

一&#xff0c;gamefi经济 什么是gamefi GameFi是一个缩写&#xff0c;它结合了游戏和去中心化金融(“DeFi”)这两个术语&#xff0c;关注的是游戏玩法如何在去中心化系统中实现货币化。对于游戏而言&#xff0c;只要开放了交易市场&#xff0c;允许玩家自由买卖&#xff0c;…...

编程日记 2026/3/5 12:05:53

hibernate 自动生成数据库表和java类 字段顺序不一致 这导致添加数据库数据时 异常

hibernate 自动生成的数据库表和java类 字段顺序不一致 这导致该书写方式添加数据库数据时 异常 User user new User( null, username, email, phone, passwordEncoder.encode(password) ); return userRepository.save(user);Hibernate 默认不会保证数据库表字段的顺序与 Ja…...

编程日记 2026/3/4 22:30:35

bbbbb

import java.util.ArrayList; import java.util.List; public class KthPermutation { public static String getPermutation(int n, int k) { // 计算阶乘 int[] factorial new int[n]; factorial[0] 1; for (int i 1; i < n; i) …...

编程日记 2026/2/14 17:39:50

《基于Workspace.java的Launcher3改造：HotSeat区域动态阻断文件夹生成机制》

1. 需求背景与技术挑战 在Android 13系统Launcher3定制化开发中&#xff0c;需实现禁止HotSeat区域创建文件夹的功能。原始逻辑中&#xff0c;当用户拖拽应用图标至HotSeat区域相邻图标时&#xff0c;会触发FolderIcon的实例化。本文将深入分析Launcher3的文件夹创建机制&…...

编程日记 2026/2/14 12:39:08

Cursor在内网环境配置自定义DeepSeek API

关键字 Cursor、DeepSeek、API配置、内网代理、HTTP/2 背景环境 使用Cursor集成环境开发程序。但是我使用公司的内网并不能使用cursor自带的模型&#xff0c;于是我就想使用DeepSeek官方的API服务。 环境&#xff1a;Windows 11系统 解决过程 网络检测 首先进行环境检测&am…...

编程日记 2026/3/5 3:47:35

【数据库】掌握MySQL事务与锁机制-数据一致性的关键

在数据库的世界里&#xff0c;数据就是一切。而确保数据的准确性和一致性&#xff0c;则是数据库系统的核心任务之一。想象一下&#xff0c;如果没有合适的机制&#xff0c;当多个用户同时试图修改同一条数据时&#xff0c;会发生什么&#xff1f; chaos&#xff08;混乱&#…...

编程日记 2026/2/28 20:54:00

在Vue3中使用$router.push方法进行路由跳转时，如何传递多个路径参数？

在 Vue 3 里&#xff0c;你可以借助 $router.push 方法进行路由跳转&#xff0c;同时传递多个路径参数。下面为你详细介绍具体实现方式&#xff1a; 1. 路由配置 首先&#xff0c;要在路由配置中定义好需要的路径参数。示例如下&#xff1a; import { createRouter, createW…...

编程日记 2026/2/21 19:27:17

【初学者】解释器和脚本各是什么？有什么区别与联系？

李升伟 整理 解释器和脚本的定义 1. 解释器&#xff08;Interpreter&#xff09; 定义&#xff1a;解释器是一个程序&#xff0c;负责逐行读取并执行代码。它将源代码翻译成机器能理解的指令&#xff0c;并立即执行。特点&#xff1a; 逐行执行代码。适合交互式编程&#xf…...

编程日记 2026/2/18 10:04:17

Kafka跨集群数据备份与同步：MirrorMaker运用

#作者&#xff1a;张桐瑞 文章目录 前言MirrorMaker是什么运行MirrorMaker各个参数的含义 前言 在大多数情况下&#xff0c;我们会部署一套Kafka集群来支撑业务需求。但在某些特定场景下&#xff0c;可能需要同时运行多个Kafka集群。比如&#xff0c;为了实现灾难恢复&#x…...

编程日记 2026/3/5 5:26:55

AI学习第二天--监督学习 半监督学习 无监督学习

目录 1. 监督学习&#xff08;Supervised Learning&#xff09; 比喻&#xff1a; 技术细节&#xff1a; 形象例子&#xff1a; 2. 无监督学习&#xff08;Unsupervised Learning&#xff09; 比喻&#xff1a; 技术细节&#xff1a; 形象例子&#xff1a; 3. 半监督学…...

编程日记 2026/2/14 22:50:10

设计模式(创建型)-抽象工厂模式

摘要 在软件开发的复杂世界中，设计模式作为解决常见问题的最佳实践方案，一直扮演着至关重要的角色。抽象工厂模式，作为一种强大的创建型设计模式，在处理创建一系列或相关依赖对象的场景时，展现出了独特的优势和灵活性。它通过提供一个创建对象的接口，让开发者能够在不指定…...

编程日记 2026/2/17 10:18:41

linux系统 Ubuntu22.04安装Nvidia驱动,解决4060系列显卡重启黑屏方法

一、禁用Nouveau 1.查看nouveau lsmod | grep nouveau 2.编辑 blacklist.conf sudo gedit /etc/modprobe.d/blacklist.conf 3.在文件最后加入 blacklist nouveau options nouveau modeset0 4.保存并关闭文件 5.更新 sudo update-initramfs -u 6.重启之后&#xff0c;检…...

编程日记 2026/2/15 16:19:36

观察者模式详解：用 Qt 信号与槽机制深入理解

引言 你是否曾遇到这样的需求&#xff1a;一个对象的状态发生变化后&#xff0c;希望通知其他对象进行相应的更新&#xff1f;比如&#xff1a; 新闻订阅系统&#xff1a;当新闻发布后&#xff0c;所有订阅者都会收到通知。股票行情推送&#xff1a;股价变化时&#xff0c;所…...

编程日记 2026/3/4 22:30:41

OSWorld：开启多模态智能体的真实计算机环境革命

OSWorld：开启多模态智能体的真实计算机环境革命 在人工智能技术突飞猛进的今天，多模态智能体正逐步突破实验室的限制，试图融入人类的日常工作场景。然而，如何评估这些智能体在真实计算机环境中处理开放式任务的能力，成为学术界和产业界共同关注的难题。2024年，由xlang-ai…...

编程日记 2026/2/17 13:15:27

LabVIEW烟气速度场实时监测

本项目针对燃煤电站烟气流速实时监测需求&#xff0c;探讨了静电传感器结构与速度场超分辨率重建方法&#xff0c;结合LabVIEW多板卡同步采集与实时处理技术&#xff0c;开发出一个高效的烟气速度场实时监测系统。该系统能够在高温、高尘的复杂工况下稳定运行&#xff0c;提供高…...

编程日记 2026/2/18 18:44:11

电脑管家如何清理内存及垃圾，提升电脑性能

电脑在长时间使用后&#xff0c;常常会变得越来越卡顿&#xff0c;打开程序的速度变慢&#xff0c;甚至响应迟缓。这时&#xff0c;不少用户会选择使用电脑管家来进行内存清理和垃圾清理。那么&#xff0c;电脑管家是如何清理内存的&#xff1f;它又是如何清理垃圾的&#xff1…...

编程日记 2026/2/15 17:20:58

强化学习基础篇二：马尔可夫决策过程

写在前面 本文是对李沐等“动手学强化学习”教程的个人阅读总结&#xff0c;原文链接&#xff1a;动手学强化学习。 第3章 马尔可夫决策过程 3.1 重要性 马尔可夫决策过程是强化学习中的基础概念&#xff0c;强化学习中的环境就是一个马尔可夫决策过程&#xff0c;与多臂老虎…...

编程日记 2026/2/17 23:55:29

EtherCAT转profinet网关集成汽车变速箱制造生产线自动化升级

客户的汽车零部件制造商需要升级其变速箱齿轮加工生产线&#xff0c;面临的关键挑战是整合新引进的欧洲齿轮精密检测设备&#xff08;基于EtherCAT协议&#xff09;与现有使用profinet协议自动化系统通信。 企业核心控制平台基于西门子PLC&#xff0c;而现场各工位采用分布式I/…...

编程日记 2026/2/19 21:00:18

tongweb7控制台无法访问

tongweb7控制台无法访问 排查 1.首先确认版本&#xff0c;如果版本是轻量级版本&#xff0c;轻量版不支持会话(session)的备份和复制、管理控制台、APM 运维工具等企业级增量功能。 2.查看端口 命令&#xff1a;ss -tnlp 或者netstat -tnlp 确认控制台端口是否开启 3.在conf…...

编程日记 2026/2/16 21:02:34

Spring中的循环依赖问题是什么？

在使用Spring框架进行开发时&#xff0c;可能会遇到一个比较棘手的问题&#xff0c;那就是循环依赖。说到循环依赖&#xff0c;很多人可能会感到有些困惑&#xff0c;难道这个问题真的有那么复杂吗&#xff1f;其实&#xff0c;理解循环依赖并不是很难。我们可以从Spring的依赖…...

编程日记 2026/2/14 8:56:32

【STM32】从新建一个工程开始：STM32 新建工程的详细步骤

STM32 开发通常使用 Keil MDK、STM32CubeMX、IAR 等工具来创建和管理工程。此处是 使用 Keil MDK5 STM32CubeMX 创建 STM32 工程的详细步骤。 新建的标准库工程文件已上传至资源中&#xff0c;下载后即可直接使用。 标准库新建 STM32 工程的基本目录结构&#xff1a;STD_STM…...

编程日记 2026/3/1 17:28:07

基于“动手学强化学习”的知识点（五）：第 18 章 离线强化学习（gym版本 ＞= 0.26）

第 18 章 离线强化学习&#xff08;gym版本 &#xff1e; 0.26&#xff09; 摘要SAC 算法部分CQL 算法CQL 总结与大函数意义CQL 总结CQL 类详细分析 摘要 本系列知识点讲解基于动手学强化学习中的内容进行详细的疑难点分析&#xff01;具体内容请阅读动手学强化学习&#xff0…...

编程日记 2026/2/14 18:49:27

搞定python之九----常用内置模块

本文是《搞定python》系列文章的第九篇&#xff0c;介绍常用的内置模块的使用。到此为止python的基础用法就彻底说完了&#xff0c;大家可以在此基础上学习爬虫、web处理等框架了。 本文的代码相对比较多&#xff0c;大家注意看代码即可。python的文档我贴出来&#xff0c;毕竟…...

编程日记 2026/2/27 1:14:53