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

CSS特效---HTML+CSS实现3D旋转卡片

news 2026/2/8 17:25:43

1、演示

2、一切尽在代码中

<!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;}body {height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #5ee7df;perspective: 200px;}.card {position: relative;width: 300px;height: 450px;border-radius: 30px;cursor: pointer;background-color: #fff;box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.1);transform-style: preserve-3d;animation: rotate-reverse 1.2s cubic-bezier(0.66, -0.47, 0.33, 1.5) forwards;backface-visibility: hidden;}.card:hover {animation: rotate 1.2s cubic-bezier(0.66, -0.47, 0.33, 1.5) forwards;}.front,.back {position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-around;font-size: 20px;background-color: #fff;border-radius: 30px;}.back {transform: rotateY(180deg);backface-visibility: hidden;}@keyframes rotate {0% {transform: rotateY(0deg);}100% {transform: rotateY(180deg);}}@keyframes rotate-reverse {0% {transform: rotateY(180deg);}100% {transform: rotateY(0deg);}}</style></head><body><div class="card"><div class="front"><p>今天天气真好！</p></div><div class="back"><p>look me~</p><p>look me~</p><p>look me~</p><p>look me~</p></div></div></body>
</html>

 

相关文章：

CSS特效---HTML+CSS实现3D旋转卡片

1、演示 2、一切尽在代码中 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Document</title&…...

编程日记 2024/4/13 13:18:56

Rust跨平台编译

❝ 如果你感觉自己被困住了&#xff0c;焦虑并充满消极情绪&#xff0c;生命出现了停滞&#xff0c;那么治疗方法很简单&#xff1a;「做点什么」。 ❞ 大家好&#xff0c;我是「柒八九」。一个「专注于前端开发技术/Rust及AI应用知识分享」的Coder 前言 之前我们不是写了一篇R…...

编程日记 2024/4/13 13:17:55

php其他反序列化知识学习

简单总结一下最近学习的&#xff0c;php其他的一些反序列化知识 phar soap session 其他 __wakeup绕过gc绕过异常非公有属性&#xff0c;类名大小写不敏感正则匹配&#xff0c;十六进制绕过关键字检测原生类的利用 phar 基础知识 在 之前学习的反序列化利用中&#xff0…...

编程日记 2024/4/13 13:16:53

浏览器工作原理与实践--HTTP/1：HTTP性能优化

谈及浏览器中的网络&#xff0c;就避不开HTTP。我们知道HTTP是浏览器中最重要且使用最多的协议&#xff0c;是浏览器和服务器之间的通信语言&#xff0c;也是互联网的基石。而随着浏览器的发展&#xff0c;HTTP为了能适应新的形式也在持续进化&#xff0c;我认为学习HTTP的最佳…...

编程日记 2024/4/13 13:15:52

idea 使用springboot helper 创建springboot项目

Spring Boot Helper 是一个在 IntelliJ IDEA 中用于快速创建 Spring Boot 项目的插件。通过这个插件&#xff0c;开发者可以简化 Spring Boot 项目的创建过程&#xff0c;并快速生成所需的依赖和配置文件。以下是使用 Spring Boot Helper 插件创建 Spring Boot 项目的详细步骤&…...

编程日记 2024/4/13 13:14:51

关于 Amazon DynamoDB 的学习和使用

文章主要针对于博主自己的技术栈&#xff0c;从Unity的角度出发&#xff0c;对于 DynamoDB 的使用。 绿色通道&#xff1a; WS SDK for .NET Version 3 API Reference - AmazonDynamoDBClient Amazon DynamoDB Amazon DynamoDB is a fast, highly scalable, highly available,…...

编程日记 2024/4/13 13:11:48

【fastapi】搭建第一个fastapi后端项目

本篇文章介绍一下fastapi后端项目的搭建。其实没有什么好说的&#xff0c;按照官方教程来即可&#xff1a;https://fastapi.tiangolo.com/zh/ 安装依赖 这也是我觉得python项目的槽点之一。所有依赖都安装在本地&#xff0c;一旦在别人电脑上编写项目就又要安装一遍。很扯淡。…...

编程日记 2024/4/13 13:07:44

Qt/QML编程之路：图片进度条的实现(50)

要实现进度条，而进度条是通过一个图片来展示的，比如逐渐增大的音量，或者逐步增大的车速，通过图片显示的效果肯定更好一些。最直接的想法是通过一个透明的rectagle，把不想让看到的遮住，实际上这种方法不可行。 import QtQuick 2.5 import QtQuick.Window 2.2 import QtGra…...

编程日记 2024/4/13 13:05:43

OOCT WPF_D3D项目报错无法加载依赖项

运行示例项目报错缺少dll&#xff0c;发现运用了这个大老李&#xff0c;通过添加PATH路径也无法解决&#xff0c;看到debug文件夹下面没有其他的依赖项。 通过depneds工具可以看到 OCCTProxy_D3D.dll 缺少依赖项&#xff0c;图中的缺项都是OCCT生成的模块dll所以讲这些dll从..…...

编程日记 2024/4/13 13:03:41

模板方法模式：定义算法骨架的设计策略

在软件开发中&#xff0c;模板方法模式是一种行为型设计模式&#xff0c;它在父类中定义一个操作的算法框架&#xff0c;允许子类在不改变算法结构的情况下重定义算法的某些步骤。这种模式是基于继承的基本原则&#xff0c;通过抽象类达到代码复用的目的。本文将详细介绍模板方…...

编程日记 2024/4/13 13:01:38

es6对于变量的解构赋值（数组解构，对象解构，字符串解构，函数解构等）解析（2024-04-12）

1、数组的解构赋值 [ ] 1.1 数组解构的基本用法 ES6 允许按照一定模式&#xff0c;从数组和对象中提取值&#xff0c;对变量进行赋值&#xff0c;这被称为解构&#xff08;Destructuring&#xff09;。本质上叫模型匹配&#xff0c;等号两边的模型相同就可以对应上。 //以前…...

编程日记 2024/4/13 13:00:36

Flutter学习13 - Widget

1、Flutter中常用 Widget 2、StatelessWidget 和 StateFulWidget Flutter 中的 widget 有很多&#xff0c;但主要分两种&#xff1a; StatelessWidget无状态的 widget如果一个 widget 是最终的或不可变的&#xff0c;那么它就是无状态的StatefulWidget有状态的 widget如果一个…...

编程日记 2024/4/13 12:59:35

Django开发一个学生选课系统

在这个选课系统中&#xff0c;分为管理员和学生两种角色。 学生登录系统以后&#xff0c;只能看到选课信息。管理员登录以后&#xff0c;可以看到选课信息和其他的管理系统。 选课界面如下&#xff1a; 学生管理界面如下&#xff1a; 数据分析界面如下&#xff1a; 数据…...

编程日记 2024/4/13 12:55:32

Vue3项目搭建及文件结构

一. Vue3项目搭建 # 安装Vue CLI npm install -g vue/cli# 通过Vue CLI创建项目&#xff1a; vue create my-vue3-project# 当问到你想要使用哪个版本的Vue时&#xff0c;选择Vue3 # 完成配置后&#xff0c;CLI会自动安装依赖并创建项目 # 最后&#xff0c;启动你的Vue3项目cd…...

编程日记 2024/4/13 12:53:30

【机器学习】Logistic与Softmax回归详解

在深入探讨机器学习的核心概念之前&#xff0c;我们首先需要理解机器学习在当今世界的作用。机器学习&#xff0c;作为人工智能的一个重要分支&#xff0c;已经渗透到我们生活的方方面面&#xff0c;从智能推荐系统到自动驾驶汽车&#xff0c;再到医学影像的分析。它能够从大量…...

编程日记 2024/4/13 12:52:29

MATLAB Simulink仿真搭建及代码生成技术—01自定义新建模型模板

MATLAB Simulink仿真搭建及代码生成技术 目录 01-自定义新建模型模板点击运行&#xff1a;显示效果&#xff1a;查看模型设置&#xff1a; 01-自定义新建模型模板 新建模型代码如下&#xff1a; function new_model(modelname) %建立一个名为SmartAss的新的模型并打开 open_…...

编程日记 2024/4/13 12:51:27

【Java8新特性】二、函数式接口

这里写自定义目录标题 一、什么是函数式接口二、自定义函数式接口三、作为参数传递 Lambda 表达式四、四大内置核心函数式接口1、消费形接口2、供给形接口3、函数型接口4、断言形接口 一、什么是函数式接口 只包含一个抽象方法的接口&#xff0c;称为函数式接口。你可以通过 L…...

编程日记 2024/4/13 12:50:26

供应RTC5606H 芯片现货

长期供应各品牌芯片现货&#xff1a; NVP2443I NVP6324 RTC5606H NZ3802-A IRF100B201 IMX290LQR-G STM32F103C8T6TR STM32F103C8T6TR STM32F103CBT7TR TPS3823-33DBVR IMX326 TPS3823-33DBVR LPC55S69**D100 OCP2184QAD DT3001S23E1-30 EMP8734-33…...

编程日记 2024/4/13 12:48:24

洛谷-P1596 [USACO10OCT] Lake Counting S

P1596 [USACO10OCT] Lake Counting S - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) #include<bits/stdc.h> using namespace std; const int N110; int m,n; char g[N][N]; bool st[N][N]; //走/没走 int dx[] {-1,-1,-1,0,0,1,1,1}; //八联通 int dy[] {-1,0,1,1,-1,1…...

编程日记 2024/4/13 12:47:23

基于双向长短期神经网络BILSTM的发生概率预测，基于GRU神经网络的发生概率预

目录 背影 摘要 LSTM的基本定义 LSTM实现的步骤 BILSTM神经网络 基于双向长短期神经网络BILSTM的发生概率预测，基于GRU神经网络的发生概率预 完整代码：基于双向长短期神经网络BILSTM的发生概率预测，基于GRU神经网络的发生概率预测资源-CSDN文库 https://download.csdn.net/d…...

编程日记 2024/4/13 12:46:22

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

编程新知 2026/2/4 16:43:14

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/12/9 0:22:01

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/9/19 4:31:58

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2026/1/31 17:09:43

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/8/19 2:57:37

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/12/12 0:56:22

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/10/25 7:51:48

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/12/14 14:47:02

Linux离线（zip方式）安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

编程新知 2025/11/23 23:50:53