CSS之3D转换

三维坐标系

三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。

x轴:水平向右注意:x右边是正值,左边是负值

y轴:垂直向下注意:y下面是正值,上面是负值

z轴:垂直屏幕注意:往外面是正值,往里面是负值

3D移动 translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向,

translform:translateX(100px):仅仅是在x轴上移动

translform:translateY(100px):仅仅是在Y轴上移动

translform:translateZ(100px):仅仅是在Z轴上移动(注意:translateZ-般用px单位)

transform:translate3d(x,y,z):其中x、y、z分别指要移动的轴的方向的距离 (xyz是不能省略的,如果没有就写)

透视 perspective

在2D平面产生近大远小视觉立体,但是只是效果二维的

如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)。模拟人类的视觉位置,可认为安排一只眼睛去看

透视我们也称为视距:视距就是人的眼睛到屏幕的距离距离视觉点越近的在电脑平面成像越大,越远成像越小透视的单位是像素

透视写在被观察元素的父盒子上面的

d:就是视距,视距就是一个距离人的眼睛到屏幕的距离。

z:就是 z轴,物体距离屏幕的距离,z轴越大(正值 )我们看到的物体就越大

3D旋转 rotate3d

3D旋转指可以让元素在三维平面内沿着x轴,y轴,z轴或者自定义轴进行旋转语法

transform:rotateX(45deg):沿着x轴正方向旋转 45度

transform:rotateY(45deg):沿着y轴正方向旋转 45deg

transform:rotateZ(45deg):沿着Z轴正方向旋转 45deg

transform:rotate3d(xy,z,deg):沿着自定义轴旋转 deg为角度(了解即可)

transform:rotate3d(x,y,z,deg):沿着自定义轴旋转 deg为角度(了解即可)xyz是表示旋转轴的矢量,是标示你是否希望沿着该轴旋转,最后一个标示旋转的角度

3D呈现 transfrom-style

控制子元素是否开启三维立体环境。

transform-style:flat子元素不开启3d立体空间 默认的

transform-style:pfeserve-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>body {perspective: 500px;}.box {position: relative;width: 200px;height: 200px;margin: 100px auto;transition: all 2s;transform-style: preserve-3d;}.box div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: pink;}.box:hover {transform: rotateY(60deg);}.box div:last-child {background-color: purple;transform: rotateX(60deg);}</style>
</head><body><div class="box"><div></div><div></div></div>
</body></html>

案例二:两面盒子翻转

<!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>body {perspective: 400px;}.box {position: relative;width: 100px;height: 100px;margin: 100px auto;transition: all .4s;transform-style: preserve-3d;}.front,.back {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;text-align: center;line-height: 100px;font-size: 20px;color: #fff;backface-visibility: hidden;}.front {background-color: pink;z-index: 1;}.back {background-color: purple;transform: rotateY(180deg);}.box:hover {transform: rotateY(180deg);}</style>
</head><body><div class="box"><div class="front">正面</div><div class="back">反面</div></div>
</body></html>

案例三: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>* {margin: 0;padding: 0;}ul {margin: 100px;}ul li {float: left;width: 120px;height: 35px;list-style: none;perspective: 500px;margin: 10px;}.box {position: relative;width: 100%;height: 100%;transform-style: preserve-3d;transition: all .3s;}.box:hover {transform: rotateX(90deg);}.front,.bottom {position: absolute;top: 0;left: 0;width: 100%;height: 100%;text-align: center;line-height: 35px;}.front {background-color: pink;z-index: 1;transform: translateZ(17.5px);}.bottom {background-color: purple;transform: translateY(17.5px) rotateX(-90deg);}</style>
</head><body><ul><li><div class="box"><div class="front">导航</div><div class="bottom">选项</div></div></li><li><div class="box"><div class="front">导航</div><div class="bottom">选项</div></div></li><li><div class="box"><div class="front">导航</div><div class="bottom">选项</div></div></li><li><div class="box"><div class="front">导航</div><div class="bottom">选项</div></div></li></ul>
</body></html>

案例四:旋转木马

<!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>body {perspective: 1000px;}section {position: relative;width: 300px;height: 200px;margin: 150px auto;transform-style: preserve-3d;animation: rotate 10s linear infinite;background: url(images/dog.jpg);}section:hover {animation-play-state: paused;}@keyframes rotate {0% {transform: rotateY(0);}100% {transform: rotateY(360deg);}}section div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(images/dog.jpg) no-repeat;}section div:nth-child(1) {transform: translateZ(300px);}section div:nth-child(2) {transform: rotateY(60deg) translateZ(300px);}section div:nth-child(3) {transform: rotateY(120deg) translateZ(300px);}section div:nth-child(4) {transform: rotateY(180deg) translateZ(300px);}section div:nth-child(5) {transform: rotateY(240deg) translateZ(300px);}section div:nth-child(6) {transform: rotateY(300deg) translateZ(300px);}</style>
</head><body><section><div>1</div><div>2</div><div>3</div><div></div><div></div><div></div></section>
</body></html>

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

kafka生产者和消费者命令的使用

kafka-console-producer.sh 生产数据 # 发送信息 指定topic即可 kafka-console-producer.sh \ --bootstrap-server bigdata01:9092 \ --topic topicA # 主题# 进程 29124 ConsoleProducer kafka-console-consumer.sh 消费数据 # 消费数据 kafka-console-consumer.sh \ --boo…

基于Springboot的心灵治愈交流平台系统的设计与实现

基于Springboot的心灵治愈交流平台系统 介绍 基于Springboot的心灵治愈交流平台系统&#xff0c;后端框架使用Springboot和mybatis&#xff0c;前端框架使用Vuehrml&#xff0c;数据库使用mysql&#xff0c;使用B/S架构实现前台用户系统和后台管理员系统&#xff0c;和不同级别…

【人工智能】Python常用库-Scikit-learn常用方法教程

Scikit-learn 是一个功能强大的机器学习库&#xff0c;支持数据预处理、分类、回归、聚类、降维等功能&#xff0c;广泛用于模型开发与评估。以下是 Scikit-learn 的常用方法及详细说明。 1. 安装与导入 安装 Scikit-learn&#xff1a; pip install scikit-learn导入基本模块…

Tcon技术和Tconless技术介绍

文章目录 TCON技术&#xff08;传统时序控制器&#xff09;定义&#xff1a;主要功能&#xff1a;优点&#xff1a;缺点&#xff1a; TCONless技术&#xff08;无独立时序控制器&#xff09;定义&#xff1a;工作原理&#xff1a;优点&#xff1a;缺点&#xff1a; TCON与TCONl…

计算机基础(下)

内存管理 内存管理主要做了什么&#xff1f; 操作系统的内存管理非常重要&#xff0c;主要负责下面这些事情&#xff1a; 内存的分配与回收&#xff1a;对进程所需的内存进行分配和释放&#xff0c;malloc 函数&#xff1a;申请内存&#xff0c;free 函数&#xff1a;释放内存…

【青牛科技】TS223 单触摸键检测IC

概 述 &#xff1a; TS223是 触 摸 键 检 测 IC&#xff0c; 提 供 1个 触 摸 键 。 触 摸 检 测 IC是 为 了用 可 变 面 积 的 键 取 代 传 统 的 按 钮 键 而 设 计 的 。低 功 耗 和 宽 工 作 电压是 触 摸 键 的 DC和 AC特 点 。TS223采 用 SSOP16、 SOT23-6的 封 装 形 式…

CUDA补充笔记

文章目录 一、不同核函数前缀二、指定kernel要执行的线程数量三、线程需要两个内置坐标变量来唯一标识线程四、不是blocksize越大越好&#xff0c;上限一般是1024个blocksize 一、不同核函数前缀 二、指定kernel要执行的线程数量 总共需要线程数是&#xff1a; 1 * N N个线程…

“华为杯”研究生数学建模比赛历年赛题汇总(2004-2024)

文章目录 赛题链接历年赛题2004年赛题2005年赛题2006年赛题2007年赛题2008年赛题2009年赛题2010年赛题2011年赛题2012年赛题2013年赛题2014年赛题2015年赛题2016年赛题2017年赛题2018年赛题2019年赛题2020年赛题2020年赛题2021年赛题2022年赛题2023年赛题2024年赛题 赛题链接 部…

Python学习指南 + 谷歌浏览器如何安装插件

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a; Python 目录 前言 Python 官方文档的使用 谷歌浏览器中如何安装插件 前言 在学习Python时&#xff0c;我们可能会出现这样的困惑&#x…

java写一个石头剪刀布小游戏

石头剪刀布是一款经典的手势游戏,通常由两人参与,玩法简单且充满趣味。玩家通过出示手势代表“石头”、“剪刀”或“布”,并根据规则比较手势决定胜负。它广泛用于休闲娱乐、决策或解压活动。 一、功能简介 用户与计算机对战。 用户输入选择:石头、剪刀或布。 计算机随机生…

docker如何安装redis

第一步 如果未指定redis&#xff0c;则安装的是最新版的 docker pull redis 创建一个目录 mkdir /usr/local/docker/redis 然后直接可以下载redis&#xff0c;这是方式确实不怎么好&#xff0c;应该找在官网上找对应的redis配置文件 wget http://download.redis.io/redis-stab…

【作业九】RNN-SRN-Seq2Seq

点击查看作业内容 目录 1 实现SRN &#xff08;1&#xff09;使用numpy实现 &#xff08;2&#xff09;在&#xff08;1&#xff09;的基础上&#xff0c;增加激活函数tanh &#xff08;3&#xff09;使用nn.RNNCell实现 &#xff08;4&#xff09;使用nn.RNN实现 2 使用R…

利用Docker容器技术部署发布web应用程序

Docker是什么&#xff1f; docker 是一个开源的应用容器引擎&#xff0c;可以帮助开发者打包应用以及依赖包到一个可移植的容器中&#xff0c;然后发布到任何流行的Linux机器上&#xff0c;也可以实现虚拟化&#xff0c;容器是完全使用沙箱机制&#xff0c;相互之间不会有任何…

【AI学习】Mamba学习(十八):S6的硬件感知设计

上一篇Mamba的文章提到&#xff0c;S6 models这个名称的由来是&#xff1a;S4 models with a selection mechanism and computed with a scan。 所以&#xff0c;S6模型首先是选择机制&#xff1a;先前模型的一个关键限制对选择性复制和归纳等重要合成任务不够适用&#xff0c…

Bug Fix 20241122:缺少lib文件错误

今天有朋友提醒才突然发现 gitee 上传的代码存在两个很严重&#xff0c;同时也很低级的错误。 因为gitee的默认设置不允许二进制文件的提交&#xff0c; 所以PH47框架下的库文件&#xff08;各逻辑层的库文件&#xff09;&#xff0c;以及Stm32Cube驱动的库文件都没上传到Gi…

实现Excel文件和其他文件导出为压缩包,并导入

导出 后端&#xff1a; PostMapping("/exportExcelData")public void exportExcelData(HttpServletRequest request, HttpServletResponse response, RequestBody ResData resData) throws IOException {List<Long> menuIds resData.getMenuIds();List<Co…

4.4 JMeter 请求参数类型详解

欢迎大家订阅【软件测试】 专栏&#xff0c;开启你的软件测试学习之旅&#xff01; 文章目录 前言1 参数&#xff08;键值对形式&#xff09;2 消息体数据&#xff08;JSON/XML 格式&#xff09;3 文件上传 前言 在使用 JMeter 进行接口测试时&#xff0c;常见的请求参数类型主…

【山大909算法题】2014-T1

文章目录 1.原题2.算法思想3.关键代码4.完整代码5.运行结果 1.原题 为带表头的单链表类Chain编写一个成员函数Reverse&#xff0c;该函数对链表进行逆序操作&#xff08;将链表中的结点按与原序相反的顺序连接&#xff09;&#xff0c;要求逆序操作就地进行&#xff0c;不分配…

Apache OFBiz xmlrpc XXE漏洞(CVE-2018-8033)

目录 1、漏洞描述 2、EXP下载地址 3、EXP利用 1、漏洞描述 Apache OFBiz是一套企业资源计划&#xff08;ERP&#xff09;系统。它提供了广泛的功能&#xff0c;包括销售、采购、库存、财务、CRM等。 Apache OFBiz还具有灵活的架构和可扩展性&#xff0c;允许用户根据业务需求…

路由传参、搜索、多选框勾选、新增/编辑表单复用

前言&#xff1a; 记录添加运动员页面功能的具体实现 ①由赛事管理页面跳转时路由传参&#xff08;携带该页面表格中莫某条数据对应的赛事id到另一个页面&#xff09;&#xff1b; ②搜索框实时搜索&#xff1b; ③多选框勾选搜索&#xff1b; ④新增表单和编辑表单复用&a…