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

css3之3D转换transform

news 文章来源：https://blog.csdn.net/ldd_eb/article/details/137212687 2024/10/31 17:26:35

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移动（translate3d)1.概念2.透视（perpective)(近大远小）（写在父盒子上） 四.3D旋转（rotate3d)1.概念2.左手准则3.呈现（transfrom-style)（写父级盒子…...

编程日记 2024/4/5 4:59:22

SpringBoot -- 外部化配置

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

编程日记 2024/4/5 4:54:18

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

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

编程日记 2024/4/5 4:53:17

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

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

编程日记 2024/4/5 4:52:16

【算法每日一练]-数论（保姆级教程篇1 埃氏筛，欧拉筛）

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

编程日记 2024/4/5 4:50:14

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

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

编程日记 2024/4/5 4:44:09

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 公平…...

编程日记 2024/4/5 4:42:06

如何对Webpack进行优化

目录 1.优化-提取css代码 1.1. 插件 mini-css-extract-plugin 1.2. 步骤： 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…...

编程日记 2024/4/5 4:41:05

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

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

编程日记 2024/4/5 4:40:03

python笔记（11）序列

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

编程日记 2024/4/5 4:39:02

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

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

编程日记 2024/4/5 4:37:00

小组分享第二部分：Jsoup

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

编程日记 2024/4/5 4:35:58

C#(winform) 调用MATLAB函数

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

编程日记 2024/4/5 4:34:57

Kubernetes探索-Pod面试(补充)

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

编程日记 2024/4/5 4:27:50

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

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

编程日记 2024/4/5 4:26:48

2024年清明节安装matlab 2024a

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

编程日记 2024/4/5 4:20:41

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

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

编程日记 2024/4/5 4:19:39

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

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

编程日记 2024/4/5 4:15:36

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

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

编程日记 2024/4/5 4:13:34

基本语法 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…...

编程日记 2024/4/5 4:10:31

Debian 配置国内软件源

为什么需要？ Debian安装好之后默认是没有软件源的，只能通过本身的光盘上的软件进行安装，这样明显是不能够满足我们的需要的，考虑到国内的上网速度以及环境，配置一个国内的阿里镜像源是最好的选择。使用 sudo vim /…...

编程日记 2024/4/5 4:09:30

选数（dfs,isprime)

题目：P1036 [NOIP2002 普及组] 选数 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) #include<bits/stdc.h> using namespace std; int n,k; int a[22]; long long ans; bool isprime(int n){for(int i2;i<sqrt(n);i){if(n%i0) return false;…...

编程日记 2024/4/5 4:08:29

RocketMQ(版本4.9.4)+RocketMQ_Dashbord环境搭建（生产者、消费者的前置环境搭建）

一、官方网站下载 RocketMQ源码包 https://rocketmq.apache.org/zh/docs/4.x/introduction/02quickstart 二、把rocketMQ上传到Linux环境下解压，编译，执行以下命令（需要提前装jdk和maven并配置好环境变量） unzip rocketmq-all-4…...

编程日记 2024/4/5 4:06:27

css隐藏溢出隐藏的滚动条

msOverflowStyle: none: 这个属性用于在 Internet Explorer 浏览器中定义滚动条的样式。将其设置为 none 可以隐藏滚动条。 scrollbarWidth: none: 这个属性用于定义滚动条的宽度。将其设置为 none 可以隐藏滚动条。这个属性在一些新的浏览器中被支持，如 Firefox。…...

编程日记 2024/4/5 4:05:25

scss常用混入（mixin）、@inclue

mixin和inclue的基本使用 mixin混入可以用于定义重复使用的样式，比如下面CSS代码 .header {display: flex;justify-content: center;align-items: center;width: 500px;height: 100px; }.footer {display: flex;justify-content: center;align-items: center;width…...

编程日记 2024/4/5 4:02:23

补代码随想录算法训练营第44天 | 完全背包、518. 零钱兑换 II 、377. 组合总和 Ⅳ

完全背包视频讲解：带你学透完全背包问题！ 和 01背包有什么差别？遍历顺序上有什么讲究？_哔哩哔哩_bilibili https://programmercarl.com/%E8%83%8C%E5%8C%85%E9%97%AE%E9%A2%98%E7%90%86%E8%AE%BA%E5%9F%BA%E7%A1%80%E5%AE%8C%E5…...

编程日记 2024/4/5 4:01:22

【Linux】网络基础常识{OSI七层模型/ TCP/IP / 端口号 /各种协议}

文章目录 1.网络常识1.0DHCP协议1. 1IP地址/MAC地址/ARP协议是什么？IP/MACARP：IP ⇒ MAC 1.2手机连接wifi的原理 SSID与BSSID手机连接wifiSSID与BSSID 1.3手机如何通过“数据/流量”上网？1.4电脑连接wifi的原理？电脑通过热点上网…...

编程日记 2024/4/5 4:00:21

python--面向对象编程和类的定义，对象的创建

一、面向对象简介 1、什么是面向对象面向对象是一种编程思想，把数据和对数据的多个操作方法封装在一起组成类，这样通过这个类创建出来的对象,就可以直接调用这些方法了。 2、面向对象相关的术语类：用来描述具有相同的属性和方法的对象的…...

编程日记 2024/4/5 3:59:19

nssm 工具把asp.net core mvc变成 windows服务，使用nginx反向代理访问

nssm工具的作用：把项目部署成Windows服务，可以在系统后台运行 1.创建一个asp.net core mvc的项目weblication1 asp.net core mvc项目要成为windows服务需要安装下面的nuget包 <ItemGroup><PackageReference Include"Microsoft.Extension…...

编程日记 2024/4/5 3:58:17

String Encryptor custom Bean not found with name ‘jasyptStringEncryptor‘...

项目采用 spring boot 2.6.13 jasypt-spring-boot-starter 3.0.5 apollo-client 1.6.0 自定义jasyptStringEncryptor，服务器上启动死活报找不到bean jasyptStringEncryptor，采用默认的，密文配置项自然解密失败导致服务无法启动。经过一…...

编程日记 2024/4/5 3:55:14

锦州网站制作/郑志平爱站网创始人

安装 pipenv install libnumapi import libnum as l l.gcd() # 最大公约数 l.lcm() # 最小公倍数 nroot() ceil() xgcd() len_in_bits() # 求二进制的位数 randint_bits() # 给定位长度的随机数 extract_prime_power(a, p) # 返回(s, t)满足a p ** s * t s2n() # 字…...

编程日记 2024/10/31 15:32:15

风铃网站具体是做那方面的/北京网站优化公司

在Linux当中有一些命令只有root账户才能使用,怎么样才能使普通的用户可以执行root权限的命令呢,就是要使用一个名字叫做sudo的命令,下面是对sudo命令的一些介绍sudo是linux系统管理指令，是允许系统管理员让普通用户执行一些或者全部的root命令的一个工具&#xff0c…...

编程日记 2024/10/31 13:12:58

双线主机可以做彩票网站吗/网站优化包括对什么优化

64位windows安装storm前需要先搞定zookeeper和python，所以下面我们3步走： 一、zookeeper 1、上https://zookeeper.apache.org/点击下方download到新页面，还得点一次中间的download，再选一个镜像链接http://mirrors.tuna.tsinghua.…...

编程日记 2024/10/31 11:46:07