CSS变形与动画（二）：perspctive透视效果 与 preserve-3d 3d效果（奥运五环例子）
文章目录
- perspective 3d透视效果
- preserve-3d 3d嵌套效果
- 例子 奥运五环
- backface-visibility 背面效果
perspective 3d透视效果
perspective 指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。
作用于在父级上。
preserve-3d 3d嵌套效果
相互可以视觉上 插入 和 覆盖
transform-style: preserve-3d; 也是用在父级上
例子 奥运五环
通过每个环细微的旋转角度实现。
主要看各环之间的覆盖关系，这就是3d嵌套的效果。
<!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>.mb{background: pink;height:600px;display: flex;justify-content: center;}.m{padding-top: 200px;width:360px;height: 200px;display: flex;flex-wrap: wrap;transform-style: preserve-3d;}.l{margin: 2px;}.l:nth-child(1){width:100px;height: 100px;border:7px solid blue;border-radius: 100%;transform: rotateX(-1deg) rotateY(-2deg);}.l:nth-child(2){width:100px;height: 100px;border:7px solid black;border-radius: 100%;transform: rotateX(-1deg) rotateY(-2deg);}.l:nth-child(3){width:100px;height: 100px;border:7px solid red;border-radius: 100%;transform: rotateX(-3deg) rotateY(-3deg);}.l:nth-child(4){width:100px;height: 100px;border:7px solid yellow;border-radius: 100%;position: relative;left:56px;bottom: 60px;transform: rotateX(0deg) rotateY(2deg);}.l:nth-child(5){width:100px;height: 100px;border:7px solid green;border-radius: 100%;position: relative;left:56px;bottom: 60px;transform: rotateX(2deg) rotateY(4deg);}</style>
</head>
<body><div class="mb"><div class="m"><div class="l"></div><div class="l"></div><div class="l"></div><div class="l"></div><div class="l"></div></div></div>
</body>
</html>
backface-visibility 背面效果
backface-visibility: hidden; 背面不可见
相关文章：
CSS变形与动画（二）：perspctive透视效果 与 preserve-3d 3d效果（奥运五环例子）
文章目录 perspective 3d透视效果preserve-3d 3d嵌套效果例子 奥运五环 backface-visibility 背面效果 perspective 3d透视效果 perspective 指定了观察者与 z0 平面的距离，使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大，而 z<0 …...
[论文笔记]Glancing Transformer for Non-Autoregressive Neural Machine Translation
引言 这是论文Glancing Transformer for Non-Autoregressive Neural Machine Translation的笔记。 传统的非自回归文本生成速度较慢，因为需要给定之前的token来预测下一个token。但自回归模型虽然效率高，但性能没那么好。 这篇论文提出了Glancing Transformer，可以只需要一…...
视觉学习（七）---Flask 框架下接口调用及python requests 实现json字符串传输
在项目实施过程中需要与其他系统进行接口联调，将图像检测的结果传递给其他系统接口，进行逻辑调用。这中间的过程可以通过requests库进行实现。 1.安装requests库 pip install requests2.postman 接口测试 我们先通过postman 了解下接口调用࿰…...
unity编写树形结构的文件管理页面
项目中需要实现点击“”按钮展开对应分类下的所有训练科目，再次点击“–”按钮将对应分类下的训练科目隐藏并收起整个面板。对此，编写一个类，将其挂载到树形结构的父类上，代码如下： using UnityEngine; using UnityEn…...
基于单片机的家用智能浇灌系统
1、开发环境 keil5，STM32CubeMX、Altium Designer 2、硬件清单 单片机：STM32F051K8Ux 土壤湿度传感器：TL - 69 温度传感器：DS18B20（数字传感器直接输出数字信号） OLED屏幕：OLED12864、 水…...
Solr的入门使用
Solr是Apache下的一个顶级开源项目，采用Java开发，它是基于Lucene的全文搜索服务器。Solr提供了比Lucene更为丰富的查询语言，同时实现了可配置、可扩展，并对索引、搜索性能进行了优化，被很多需要搜索的网站中广泛使用。…...
css鼠标样式 cursor: pointer
cursor: none; cursor:not-allowed; 禁止选择 user-select: none; pointer-events:none;禁止触发事件, 该样式会阻止默认事件的发生，但鼠标样式会变成箭头...
【解决】Kafka Exception thrown when sending a message with key=‘null‘ 异常
问题原因： 如下图，kafka 中配置的是监听域名的方式，但程序里使用的是 ip:port 的连接方式。 解决办法： kafka 中配置的是域名的方式，程序里也相应配置成 域名:port 的方式（注意：本地h…...
中心极限定理 简明教程
中心极限定理是概率论中的一组定理，它们描述了一些独立随机变量的和或平均值的分布在一定条件下趋近于正态分布的现象。中心极限定理有多种形式，其中最常见的是独立同分布的中心极限定理，它可以用数学公式表示为： 前提条件&#x…...
商城-学习整理-基础-库存系统（八）
一、整合ware服务 1、配置注册中心 2、配置配置中心 3、配置网关，重启网关 二、仓库维护 http://localhost:8001/#/ware-wareinfo 在前端项目module中创建ware文件夹保存仓库系统的代码。 将生成的wareinfo.vue文件拷贝到项目中。 根据功能，修改后台接…...
【C++ 学习 ⑬】- 详解 list 容器
目录 一、list 容器的基本介绍 二、list 容器的成员函数 2.1 - 迭代器 2.2 - 修改操作 三、list 的模拟实现 3.1 - list.h 3.2 - 详解 list 容器的迭代器 3.2 - test.cpp 一、list 容器的基本介绍 list 容器以类模板 list<T>（T 为存储元素的类型&…...
设计模式十五：命令模式（Command Pattern）
命令模式（Command Pattern）是一种行为型设计模式，它旨在将请求或操作封装成一个对象，从而允许你将不同的请求参数化，并且能够在不同的时间点执行或者队列化这些请求。这种模式使得请求发送者与接收者之间解耦ÿ…...
FPGA GTP全网最细讲解，aurora 8b/10b协议，HDMI视频传输，提供4套工程源码和技术支持
目录 1、前言免责声明 2、我这里已有的 GT 高速接口解决方案3、GTP 全网最细解读GTP 基本结构GTP 发送和接收处理流程GTP 的参考时钟GTP 发送接口GTP 接收接口GTP IP核调用和使用 4、设计思路框架HDMI输入视频配置及采集视频数据组包GTP aurora 8b/10b数据对齐视频数据解包图像…...
用dcker极简打包java.jar镜像并启动
用dcker极简打包java.jar镜像并启动 一、本地打包好jar包 二、新建文件夹，将步骤1中的jar包拷贝到文件夹下 三、同目录下新建Dockerfile ## 基础镜像，这里用的是openjdk:8 FROM openjdk:8## 将步骤一打包好的jar包 拷贝到镜像的 跟目录下[目录可以自定义…...
设计模式——创建型
1.单例模式 单例模式主要用于某个类有且只能用一个对象的场景，单例模式下不能外部实例化对象，由类内部自行私有化实例对象并提供一个可以获得该对象的方法。单例模式主要有饿汉模式（安全，但在编译时就会自动创建对象，…...
iTOP-i.MX8M开发板添加USB网络设备驱动
选中支持 USB 网络设备驱动，如下图所示： [*] Device Drivers→ *- Network device support → USB Network Adapters→ {*} Multi-purpose USB Networking Framework 将光标移动到 save 保存，如下图所示： 保存到 arch/arm64/c…...
分类预测 | MATLAB实现GAPSO-LSSVM多输入分类预测
分类预测 | MATLAB实现GAPSO-LSSVM多输入分类预测 目录 分类预测 | MATLAB实现GAPSO-LSSVM多输入分类预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.分类预测 | MATLAB实现GAPSO-LSSVM多输入分类预测 2.代码说明：要求于Matlab 2021版及以上版本。 程序…...
JMeter 的并发设置教程
JMeter 是一个功能强大的性能测试工具，可以模拟许多用户同时访问应用程序的情况。在使用 JMeter 进行性能测试时，设置并发是非常重要的。本文将介绍如何在 JMeter 中设置并发和查看报告。 设置并发 并发是在线程组下的线程属性中设置的。 线程数&#…...
数据治理有哪些产品
数据治理是现代企业管理中至关重要的一个环节。随着企业的数据量不断增长，如何有效地管理和利用数据成为了一个亟待解决的问题。幸运的是，市场上已经涌现出了许多优秀的数据治理产品，下面就来介绍一些常见的数据治理产品。 首先，我…...
windows安装go，以及配置工作区，配置vscode开发环境
下载安装go 我安装在D:\go路径下配置环境变量 添加GOROOT value为D:\go修改path 添加%GOROOT%\bin添加GOPATH value为%USERPROFILE%\go 其中GOPATH 是我们自己开发的工作区，其中包含三个folder bin,pkg,以及src，其中src为我们编写代码的位置 配置vscod…...
Spark 之 入门讲解详细版（1）
1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室（Algorithms, Machines, and People Lab）开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目，8个月后成为Apache顶级项目，速度之快足见过人之处&…...
rknn优化教程（二）
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK，开始写第二篇的内容了。这篇博客主要能写一下： 如何给一些三方库按照xmake方式进行封装，供调用如何按…...
无法与IP建立连接，未能下载VSCode服务器
如题，在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈，发现是VSCode版本自动更新惹的祸！！！ 在VSCode的帮助->关于这里发现前几天VSCode自动更新了，我的版本号变成了1.100.3 才导致了远程连接出…...
UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法：netstat [选项] 功能：查看网络状态 常用选项： n 拒绝显示别名&#…...
Mac下Android Studio扫描根目录卡死问题记录
环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中，提示一个依赖外部头文件的cpp源文件需要同步，点…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析（Parser） 2.4、执行sql 1. 预处理（Preprocessor） 2. 查询优化器（Optimizer） 3. 执行器…...
【Go语言基础【13】】函数、闭包、方法
文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数（函数作为参数、返回值） 三、匿名函数与闭包1. 匿名函数（Lambda函…...
【JVM面试篇】高频八股汇总——类加载和类加载器
目录 1. 讲一下类加载过程？ 2. Java创建对象的过程？ 3. 对象的生命周期？ 4. 类加载器有哪些？ 5. 双亲委派模型的作用（好处）？ 6. 讲一下类的加载和双亲委派原则？ 7. 双亲委派模…...
scikit-learn机器学习
# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...
Golang——9、反射和文件操作
反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一：使用Read()读取文件2.3、方式二：bufio读取文件2.4、方式三：os.ReadFile读取2.5、写…...