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

css3之3D转换transform

css3之3D转换

  • 一.特点
  • 二.坐标系
  • 三.3D移动(translate3d)
    • 1.概念
    • 2.透视(perpective)(近大远小)(写在父盒子上)
  • 四.3D旋转(rotate3d)
    • 1.概念
    • 2.左手准则
    • 3.呈现(transfrom-style)(写父级盒子上)
    • 4.总结
  • 五.案例
    • 1.两面旋转
    • 2.导航栏
    • 3.旋转木马

一.特点

近大远小,后面看不见

二.坐标系

在这里插入图片描述

三.3D移动(translate3d)

1.概念

在这里插入图片描述

2.透视(perpective)(近大远小)(写在父盒子上)

在这里插入图片描述

四.3D旋转(rotate3d)

1.概念

在这里插入图片描述

2.左手准则

(1)沿着x轴旋转
在这里插入图片描述
(2)沿着y轴旋转
在这里插入图片描述

3.呈现(transfrom-style)(写父级盒子上)

在这里插入图片描述

4.总结

在这里插入图片描述

五.案例

1.两面旋转

在这里插入图片描述
在这里插入图片描述

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {perspective: 350px;}.box {position: relative;width: 300px;height: 300px;margin: 100px auto;transition: all .4s;transform-style: preserve-3d;}.box:hover {transform: rotateY(180deg);}.front,.back {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;font-size: 30px;color: #fff;text-align: center;line-height: 300px;}.front {background-color: pink;z-index: 1;}.back {background-color: purple;/*背对背旋转180deg,字不会镜像*/transform: rotateY(180deg);}</style>
</head><body><div class="box"><div class="front">黑马程序员</div><div class="back">pink老师等你</div></div>
</body></html>

2.导航栏

在这里插入图片描述

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>* {padding: 0;margin: 0;}ul {margin: 100px;}ul li {float: left;margin: 0 5px;width: 120px;height: 35px;list-style: none;perspective: 500px;}.box {position: relative;width: 100%;height: 100%;transform-style: preserve-3d;transition: all .4s;text-align: center;font-size: 16px;line-height: 35px;}.box:hover {transform: rotateX(90deg);}.front,.bottom {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.front {background-color: pink;z-index: 1;transform: translateZ(17.5px);}.bottom {background-color: purple;transform: translateY(17.5px) rotateX(-90deg);}
</style><body><ul><li><div class="box"><div class="front">黑马程序员</div><div class="bottom">pink老师等你</div></div></li></ul>
</body></html>

3.旋转木马

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {perspective: 600px;}section {position: relative;width: 300px;height: 200px;margin: 250px auto;transform-style: preserve-3d;animation: rotate 10s linear infinite;}section div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(001a3fe237b2c5e71eeca0a5ca44c68c.png) no-repeat;background-size: 300px 200px;}section:hover {animation-play-state: paused;}section div:nth-child(1) {transform: rotateY(60deg) translateZ(300px);}section div:nth-child(2) {transform: rotateY(120deg) translateZ(300px);}section div:nth-child(3) {transform: rotateY(180deg) translateZ(300px);}section div:nth-child(4) {transform: rotateY(240deg)translateZ(300px);}section div:nth-child(5) {transform: rotateY(300deg)translateZ(300px);}section div:nth-child(6) {transform: rotateY(360deg)translateZ(300px);}@keyframes rotate {0% {transform: rotateY(0);}100% {transform: rotateY(360deg);}}</style>
</head><body><section><div></div><div></div><div></div><div></div><div></div><div></div></section </body></html>

相关文章:

css3之3D转换transform

css3之3D转换 一.特点二.坐标系三.3D移动&#xff08;translate3d)1.概念2.透视&#xff08;perpective)(近大远小&#xff09;&#xff08;写在父盒子上&#xff09; 四.3D旋转&#xff08;rotate3d)1.概念2.左手准则3.呈现&#xff08;transfrom-style)&#xff08;写父级盒子…...

SpringBoot -- 外部化配置

我们如果要对普通程序的jar包更改配置&#xff0c;那么我们需要对jar包解压&#xff0c;并在其中的配置文件中更改配置参数&#xff0c;然后再打包并重新运行。可以看到过程比较繁琐&#xff0c;SpringBoot也注意到了这个问题&#xff0c;其可以通过外部配置文件更新配置。 我…...

优酷动漫顶梁柱!神话大乱炖的修仙番为何火爆?

优酷动漫新晋顶梁柱&#xff0c;实时超160万在追的修仙番长啥样&#xff1f; 由优酷动漫联合玄机科技打造的《师兄啊师兄》俨然成为了国漫界一颗璀璨的新星。自去年开播以来热度口碑双丰收&#xff0c;今年在播的第二季人气更是节节攀升&#xff0c;稳坐优酷动漫榜第一把交椅。…...

每日一题:C语言经典例题之判断实数相等

题目&#xff1a; 从键盘输入两个正实数&#xff0c;位数不超过200&#xff0c;试判断这两个实数是否完全相等。注意输入的实数整数部分可能有前导0&#xff0c;小数部分可能有末尾0。 输入 输入两个正实数a和b。 输出 如果两个实数相等&#xff0c;则输出Yes&#xff0c;…...

【算法每日一练]-数论(保姆级教程 篇1 埃氏筛,欧拉筛)

目录 保证给你讲透讲懂 第一种&#xff1a;埃氏筛法 第二种&#xff1a;欧拉筛法 题目&#xff1a;质数率 题目&#xff1a;不喜欢的数 思路&#xff1a; 问题&#xff1a;1~n 中筛选出所有素数&#xff08;质数&#xff09; 有两种经典的时间复杂度较低的筛法&#xff0…...

【剑指offr--C/C++】JZ59 滑动窗口的最大值

一、题目 二、思路及代码 暴力解法是依次往后滑动一位&#xff0c;然后比较窗口内的值。 我这里考虑&#xff1a;窗口每次往后移动一位&#xff0c;那么如果当前窗口的最大值max在窗口内部&#xff0c;那么再滑动到下一个窗口的时候&#xff0c;窗口内只有最新进来的一个元素没…...

RabbitMQ Tutorial

参考API : Overview (RabbitMQ Java Client 5.20.0 API) 参考文档: RabbitMQ: One broker to queue them all | RabbitMQ 目录 结构 Hello World consumer producer 创建连接API解析 创建连接工厂 生产者生产消息 消费者消费消息 队列声明 工作队列Work Queues 公平…...

如何对Webpack进行优化

目录 1.优化-提取css代码 1.1. 插件 mini-css-extract-plugin 1.2. 步骤&#xff1a; 1.3. 注意 1.4. 好处 1.5. 练习 2. 优化-css代码提取后压缩 2.1. 问题引入 2.2. 解决 2.3. 步骤 3. Webpack打包less代码 3.1. 加载器 less-loader 3.2. 步骤 3.3. 注意&#xf…...

nut-ui中的menu 菜单组件的二次封装

这个菜单组件 一般可以直接用到项目里 如果复用性不强的话 直接使用 但是有一个问题 如果很多地方都需要用到这个组件 我们可以把这个组件二次封装一下 <template><div class"cinema-search-filter-component"><nut-menu><template #icon>&…...

python笔记(11)序列

Python中的“序列”是一个广义术语&#xff0c;用于描述一种特定的数据结构&#xff0c;它具备以下共同特征&#xff1a; 有序性&#xff1a;序列中的元素按照特定的顺序排列&#xff0c;每个元素在序列中都有一个确定的位置&#xff0c;即索引。 索引访问&#xff1a;通过索引…...

Rust egui(4) 增加自己的tab页面

如下图&#xff0c;增加一个Sins也面&#xff0c;里面添加一个配置组为Sin Paraemters&#xff0c;里面包含一个nums的参数&#xff0c;范围是1-1024&#xff0c;根据nums的数量&#xff0c;在Panel中画sin函数的line。 demo见&#xff1a;https://crazyskady.github.io/index.…...

小组分享第二部分:Jsoup

1.Jsoup是什么&#xff1a; 是HTML的解析器,可以解析URL地址&#xff0c;HTML的文本内容&#xff0c;可以使用DOM,CSS以及类似Jquery的操作方法来操作数据 2.Jsoup的作用 1.通过URL或者文件或者字符串获取到HTML页面并解析 2.使用DOM或CSS等操作来对数据进行操作 3.可以操作HT…...

C#(winform) 调用MATLAB函数

测试环境 VisualStudio2022 / .NET Framework 4.7.2 Matlab2021b 参考&#xff1a;C# Matlab 相互调用 Matlab 1、编写Matlab函数 可以没有任何参数单纯定义matlab处理的函数&#xff0c;输出的数据都存在TXT中用以后期读取数据 function [result,m,n] TEST(list) % 计算…...

Kubernetes探索-Pod面试(补充)

针对上篇文章"kubernetes探索-Pod面试"做一点点补充... 1. 简述Pod的删除流程 1) kube-apiserver接收到用户的删除指令&#xff0c;默认等待30s(优雅退出时间)&#xff0c;随后认为pod已死亡&#xff0c;将其标记为Terminating状态&#xff1b; 2) kubelet监控到pod…...

深入了解JUnit 5:新一代Java单元测试框架

深入了解JUnit 5&#xff1a;新一代Java单元测试框架 近年来&#xff0c;Java领域的单元测试框架发展迅速&#xff0c;而JUnit 5作为JUnit系列的最新版本&#xff0c;为开发人员提供了更多的功能和灵活性。在本文中&#xff0c;我们将介绍JUnit 5&#xff0c;并探讨其与JUnit 4…...

2024年清明节安装matlab 2024a

下载安装离线支持包SupportSoftwareDownloader_R2024a_win64&#xff0c;地址https://ww2.mathworks.cn/support/install/support-software-downloader.html&#xff0c;运行软件&#xff08;自解压运行&#xff09;&#xff0c;登录账号&#xff08;需要提前在官网注册&#x…...

关于PostgreSQL JDBC中的log输出是怎么回事?

微信公众号:数据库杂记 个人微信: _iihero 我是iihero. 也可以叫我Sean. iihero@CSDN(https://blog.csdn.net/iihero) Sean@墨天轮 (https://www.modb.pro/u/16258) 数据库领域的资深爱好者一枚。SAP数据库技术专家与架构师,PostgreSQL ACE. 水木早期数据库论坛发起人db2@…...

【科研笔记】知识星球不可选择内容爬虫

知识星球不可选择内容爬虫 1 背景2 实现3 拓展遗留问题1 背景 针对与知识星球中,电脑打开网页不可选择复制粘贴的问题,进行爬虫处理,获取网页的内容,并保存在本地 2 实现 需要下载python,和爬虫的第三方库selenium,可以查看博客中有关selenium的内容进行回顾。当前使用…...

[技术闲聊]我对电路设计的理解(二)

第一篇文章 [技术闲聊]我对电路设计的理解(一)&#xff0c;看着是述说着应届生如何对待一份工作&#xff0c;其实也是我在过往以及以目前视野看过往的事情&#xff0c;自己的一种态度。谦虚&#xff0c;是一个不可多得的词汇&#xff0c;因为刚起步&#xff0c;学习的东西很多&…...

【Android、 kotlin】kotlin学习笔记

基本语法 fun main(){val a2var b "Hello"println("$ (a - 1} $b Kotlin!")} Variables 只赋值一次用val read-only variables with val 赋值多次用var mutable variables with var Standard output printin() and print() functions String templ…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

超短脉冲激光自聚焦效应

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

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...

rknn toolkit2搭建和推理

安装Miniconda Miniconda - Anaconda Miniconda 选择一个 新的 版本 &#xff0c;不用和RKNN的python版本保持一致 使用 ./xxx.sh进行安装 下面配置一下载源 # 清华大学源&#xff08;最常用&#xff09; conda config --add channels https://mirrors.tuna.tsinghua.edu.cn…...