HTML+CSS实现超酷超炫的3D立方体相册

效果演示

HTML和CSS实现一个简单的3D立方体加载动画的相册。它使用了HTML来构建立方体的结构,并通过CSS来添加样式和动画效果。
在这里插入图片描述

HTML

<div class="loader3d">
    <div class="cube">
        <div class="face">
            <img src="../../static/test.jpg" alt="">
        </div>
        <div class="face">
            <img src="../../static/test.jpg" alt="">
        </div>
        <div class="face">
            <img src="../../static/test.jpg" alt="">
        </div>
        <div class="face">
            <img src="../../static/common_bot.png" alt="">
        </div>
        <div class="face">
            <img src="../../static/common_bot.png" alt="">
        </div>
        <div class="face">
            <img src="../../static/common_bot.png" alt="">
        </div>
    </div>
</div>
  • loader3d:这是外层容器,用于包裹整个立方体。
  • cube:这是立方体的主体,包含六个面(.face)。
  • face:每个.face代表立方体的一个面。这里一共有六个面,用自己的图片即可。

CSS

.loader3d {
    perspective: 600px;
    width: 100px;
    height: 100px;
}

.cube {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: rotate 4s linear infinite;
}

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #3498db, #e74c3c);
    opacity: 0.8;
    border: 0.5px solid #fff;
    border-radius: 25%;
    text-align: center;
    line-height: 100px;
}

.face img {
    width: 100%;
    height: 100%;
    border: 0.5px solid #fff;
    border-radius: 25%;
}

.face:nth-child(1) {
    transform: rotateX(90deg) translateZ(50px);
}

.face:nth-child(2) {
    transform: rotateX(-90deg) translateZ(50px);
}

.face:nth-child(3) {
    transform: translateZ(50px);
}

.face:nth-child(4) {
    transform: rotateY(90deg) translateZ(50px);
}

.face:nth-child(5) {
    transform: rotateY(-90deg) translateZ(50px);
}

.face:nth-child(6) {
    transform: rotateY(180deg) translateZ(50px);
}

@keyframes rotate {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}
  • loader3d:这是外层容器的样式,设置了透视效果(perspective),宽度和高度。
  • cube:这是立方体的样式,设置了宽度、高度、3D变换样式(transform-style),以及一个无限循环的旋转动画(rotate)。
  • face:这是立方体每个面的通用样式,设置了位置、大小、背景渐变色、透明度、边框、边框圆角和文本对齐方式。
  • face img:这是每个面上图片的样式,设置了图片的宽度、高度、边框和圆角。
  • face的nth-child()选择器:这是为每个面设置不同的3D旋转和位置。例如,.face:nth-child(1)将第一个面旋转90度并沿Z轴移动50px。
  • @keyframes rotate:这是一个关键帧动画,定义了立方体的旋转效果。从0%到100%,立方体的X轴和Y轴旋转角度从0度增加到360度。
  • 立方体会无限循环地沿着X轴和Y轴旋转,这是通过@keyframes rotate定义的动画实现的。
  • 每个面都有自己的旋转和位置,使得立方体看起来在空间中旋转。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/902529.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何对pdf文件进行加密?pdf文件加密全攻略与深度解析(5个方法)

如何对pdf文件进行加密&#xff1f; 只见&#xff0c;在深夜的情报局里&#xff0c;特工小李将一份绝密PDF文件放在保险箱内&#xff0c;以为这样就天衣无缝了。 细细推敲&#xff0c;漏洞百出&#xff1a; 如果钥匙被盗呢&#xff1f;如果被神匠破解出密码呢&#xff1f;如果…

java 提示 避免用Apache Beanutils进行属性的copy。

避免用Apache Beanutils进行属性的copy。 Inspection info: 避免用Apache Beanutils进行属性的copy。 说明&#xff1a;Apache BeanUtils性能较差&#xff0c;可以使用其他方案比如Spring BeanUtils, Cglib BeanCopier。 TestObject a new TestObject(); TestObject b new Te…

linux指令笔记

bash命令行讲解 lyt &#xff1a;是用户名 iZbp1i65rwtrfbmjetete2b2Z :这个是主机名 ~ &#xff1a;这个是当前目录 $ &#xff1a;这个是命令行提示符 每个指令都有不同的功能&#xff0c;大部分指令都可以带上选项来实现不同的效果。 一般指令和选项的格式&#xff1a;…

【openEuler/Centos】yum安装软件报Error: GPG check FAILED【分析根因弄明白,亲测有效不浪费时间】

yum安装软件报Error: GPG check FAILED 环境信息&#xff1a;cat /etc/openEuler-release openEuler release 22.03 (LTS-SP1) 报错信息 The downloaded packages were saved in cache until the next successful transaction. You can remove cached packages by executin…

当我们在微服务中使用API网关时,它是否会成为系统的瓶颈?这种潜在的瓶颈如何评估和解决?如何在微服务架构中保证高效请求流量?|API网关|微服务|异步处理

目录 1. API网关在微服务中的角色与重要性 2. API网关瓶颈的评估 2.1 请求延迟分析 2.2 并发请求量监控 2.3 内存和CPU使用情况 2.4 限流和熔断机制评估 2.5 日志分析 3. API网关瓶颈的解决方案 3.1 缓存机制优化 3.2 负载均衡优化 3.3 异步处理与消息队列 3.4 限流…

记录如何在RK3588板子上跑通paddle的OCR模型

官网文档地址 rknn_zoo RKNPU2_SDK RKNN Model Zoo 一、PC电脑是Ubuntu22.04系统中完成环境搭建(板子是20.04&#xff09; 安装模型转换环境 ​conda create -n rknn2 python3.10 conda activate rknn2 安装Ubuntu依赖包 su…

STM32 第18章 SysTick--系统定时器

时间:2024.10.26-10.27 参考资料: 《零死角玩转STM32》“SysTick--系统定时器”章节 一、学习内容 1.SysTick简介 1.1 SysTick: 系统定时器,24位,只能递减,存在于内核,嵌套在NVIC中,所有的Cortex-M内核的单片机都具有这个定时器。 官方参考手册里的介绍: 系统嘀…

riscv uboot 启动流程分析 - SPL启动流程

分析uboot 启动流程硬件&#xff1a;启明智显推出M4核心板 &#xff08;https://gitee.com/qiming-zhixian/m4-openwrt&#xff09; 1.U-boot和SPL概述 U-Boot 分为 uboot-spl 和 uboot 两个组成部分。SPL 是 Secondary Program Loader 的简称&#xff0c;第二阶段程序加载器。…

重塑在线软件开发新纪元:集成高效安全特性,深度解析与评估会员与促销管理系统的系统架构设计

案例 阅读以下关于软件架构设计与评估的叙述&#xff0c;回答问题1和问题2。 【题目】 某电子商务公司拟升级其会员与促销管理系统&#xff0c;向用户提供个性化服务&#xff0c;提高用户的粘性。在项目立项之初&#xff0c;公司领导层一致认为本次升级的主要目标是提升会员管…

简单的udp程序

文章目录 1. 预备知识1.1 源IP地址和目的IP地址1.2 端口号1.3 套接字初识1.4 tcp协议和udp协议简单认识1.5 网络字节序 2. udp程序2.1 创建套接字&#xff08;socket&#xff09;的系统调用2.2 bind()2.2.1 初始化一个sockaddr_in结构体2.2.2 inet_addr函数2.2.3 0.0.0.02.2.4 …

深入解析东芝TB62261FTG,步进电机驱动方案

TB62261FTG是一款由东芝推出的两相双极步进电机驱动器&#xff0c;采用了BiCD工艺&#xff0c;能够提供高效的电机控制。这款芯片具有多种优秀的功能&#xff0c;包括PWM斩波、内置电流调节、低导通电阻的MOSFET以及多种步进操作模式&#xff0c;使其非常适合用于需要精确运动控…

一步一步从微信小程序获取asp.net Core API的数据

前面我们说过&#xff0c;如何使用微信小程序获取asp.net的数据&#xff0c;这里我们继续介绍如何获取asp.net core api的数据。两者之间还是有一些差别的。本篇博文旨在详细介绍如何一步一步从微信小程序获取asp.net Core API的数据。 文章目录 一、建立并了解asp.net core we…

RabbitMQ集群搭建及使用

1. 概述 前提条件&#xff1a;linux服务器下已经安装好了docker服务。 本文档将搭建一个三台RabbitMQ的集群&#xff0c;包括三个RabbitMQ容器安装在同一服务器和三台不同的服务器。 2. 集群搭建 在一台服务器上创建三个RabbitMQ容器。 2.1.1. 创建容器 执行以下命令创建三…

合理利用IPIDEA代理IP,优化数据采集效率!

一、前言 在全球化与信息化交织的当代社会&#xff0c;数据已成为驱动商业智慧与技术革新的核心引擎。网络&#xff0c;作为信息汇聚与交流的枢纽&#xff0c;不仅是人们获取知识的窗口&#xff0c;更是商业活动与技术创新的广阔舞台。在这个信息繁荣的时代&#xff0c;Python…

Docker 实践与应用举例教程:从入门到精通

Docker 实践与应用举例教程&#xff1a;从入门到精通 引言 在现代软件开发中&#xff0c;Docker 已成为一种不可或缺的工具。它通过容器化技术简化了应用的部署、管理和扩展&#xff0c;极大地提高了开发和运维的效率。本文将详细介绍 Docker 的基本概念、安装步骤、常用命令…

开放式耳机哪个品牌音质好?音质最好的开放式耳机推荐!

如今&#xff0c;开放式耳机市场日益繁荣&#xff0c;成为了众多音乐爱好者和追求舒适佩戴体验者的新宠。然而&#xff0c;面对琳琅满目的品牌和产品&#xff0c;消费者往往陷入选择的困境。音质&#xff0c;作为衡量一款耳机优劣的关键因素&#xff0c;更是备受关注。究竟哪个…

反编译华为-研究功耗联网监控日志

摘要 待机功耗中联网目前已知的盲点&#xff1a;App自己都不知道的push类型的被动联网、app下载场景所需时长、组播联网、路由器打醒AP。 竞品 策略 华为 灭屏使用handler定时检测&#xff08;若灭屏30分钟内则周期1分钟&#xff0c;否则为2分钟&#xff09;&#xff0c;检…

【Unity踩坑】UWP应用未通过Windows应用认证:API不支持

在将Unity项目导出为XAML类型的UWP项目后&#xff0c;通过Visual Studio打包成功&#xff0c;但在进行Windows应用认证时结果是Failed。 其中的错误是某些dll里用到了Windows SDK不支持的API。 本次问题中涉及到的具体dll有两个&#xff1a;gilzoide-sqlite-net.dll和D3D12Cor…

【Linux网络】传输层协议UDP与TCP

W...Y的主页 &#x1f60a; 代码仓库分享 &#x1f495; 目录 传输层 再谈端口号 ​编辑 端口号范围划分 认识知名端口号(Well-Know Port Number) netstat pidof UDP协议 UDP协议端格式 UDP的特点 面向数据报 UDP的缓冲区 UDP使用注意事项 基于UDP的应用层协议…

开源实时数仓的构建

设计计思路 基本思路 开源数据平台的设计思路是通过 Flink SQL Batch、StartRocks SQL 、StartRocks物化视图 的能力实现一个离线任务的开发&#xff1b;使用 DolphinScheduler 进行离线工作流编排和调度&#xff1b;通过 Flink CDC 和 Flink SQL 实现流处理能力&#xff0c;进…