3D转换1111

1.三维坐标系

1.3D位移: translate3d(x,y,z)

translform:translateX(100px):仅仅是在x轴上移动
translform:translateY(100px):仅仅是在Y轴上移动
translform:translateZ(100px):仅仅是在Z轴上移动(注意:translateZ一般用px单位)
transform:translate3d(x,y,z):其中 x、y、z 分别指要移动的轴的方向的距离
因为z轴是垂直屏幕,由里指向外面,所以默认是看不到元素在z轴的方向上移动

2.3D旋转: rotate3d(x,y,z)

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

3.透视: perspective

4.3D呈现 transfrom-style

3D呈现 transfrom-style
控制子元素是否开启三维立体环境。。
transform-style: flat 子元素不开启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>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            margin: 100px;
        }
        ul li{
            float: left;
            margin: 0 5px;
            list-style: none;
            width: 120px;
            height: 35px;
             perspective: 500px;
        }
        .box {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: all .4s;
        }
        .box:hover{
            transform: rotateX(90deg);
        }
        .front,
        .bottom {
            position: absolute;
            left: 0;
            top: 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>
</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>
        <li>
            <div class="box">
                <div class="front">前途似海</div>
                <div class="bottom">来日方长</div>
            </div>
        </li>
    </ul>
</body>
</html>

5.浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无须添加。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HTTP/1.1 如何优化?(计算机网络)

有三种方法&#xff1a; 第一个思路是&#xff0c;通过缓存技术来避免发送 HTTP 请求。客户端收到第一个请求的响应后&#xff0c;可以将其缓存在本地磁盘&#xff0c;下次请求的时候&#xff0c;如果缓存没过期&#xff0c;就直接读取本地缓存的响应数据。如果缓存过期&#…

Uibot6.0 (RPA财务机器人师资培训第6天 )发票验真机器人案例实战

类似于小北的这篇博客&#xff1a;Uibot (RPA设计软件&#xff09;Mage AI智能识别&#xff08;发票识别&#xff09;———课前材料五_uibot 添加mageai-CSDN博客https://blog.csdn.net/Zhiyilang/article/details/135591297?spm1001.2014.3001.5501训练网站&#xff1a;泓江…

122、内网安全——域信息收集应用网络凭据CS插件AdfindBloodHound

文章目录 理解域域信息搜集 理解域 假设有1000台计算机&#xff0c;运维人员需要为每一台计算机进行软件的安装、环境部署&#xff0c;实际上运维人员不可能亲自对每一台计算机进行软件的安装和环境部署。实际&#xff0c;将所有1000台计算机放入一个域中&#xff0c;域内有一…

简单爬虫,爬取某东某商品评论前十页

商品链接地址&#xff1a;【博世四坑5系 6x100x160】博世&#xff08;BOSCH&#xff09;四坑5系&#xff08;1支装&#xff09;圆柄两坑两槽混凝土钻头 6x100x160mm【行情 报价 价格 评测】-京东 首先抓包&#xff0c;用搜索框搜索评论&#xff0c;看评论在哪个包中 为了好看筛…

Python - 深度学习系列31 - ollama的搭建与使用

说明 做这个的主要目的是为了搭建Langchain的本地环境&#xff0c;使用LangChain让LLM具备调用自定义函数的功能。 内容 1 安装server 以下将ollama的安装方式&#xff0c;以及使用做一个简单的说明(记录&#xff09;。之前对这个工具没有了解&#xff0c;只是从快速实践的…

【python】pip清华大学镜像

1、修改pip源为清华源&#xff1a; pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple2、结果是自动给我创建了一个文件&#xff1a; 3、打开这个文件所在的文件夹&#xff1a; 4、打开文件&#xff1a; 5、如果不想指定清华的&#xff0c;就删掉…

微信小程序引导组件【添加到我的小程序】

微信小程序引导组件&#xff0c;点击按钮&#xff0c;弹窗引导用户【添加到我的小程序】 源代码 https://ext.dcloud.net.cn/plugin?id17303

算法学习——LeetCode力扣图论篇3(127. 单词接龙、463. 岛屿的周长、684. 冗余连接、685. 冗余连接 II)

算法学习——LeetCode力扣图论篇3 127. 单词接龙 127. 单词接龙 - 力扣&#xff08;LeetCode&#xff09; 描述 字典 wordList 中从单词 beginWord 和 endWord 的 转换序列 是一个按下述规格形成的序列 beginWord -> s1 -> s2 -> … -> sk&#xff1a; 每一对相…

动态内存管理-错题合集讲解

空指针的解应用操作&#xff08;错误信息合集&#xff09; 越界访问 首先我们上一个代码&#xff0c;看看这个的代码的问题 这个代码的问题显而易见 &#xff0c;就是在循环里面&#xff0c;产生了越界访问的问题&#xff0c;这里你开辟了10个整形空间&#xff0c;但是从0-1…

爬虫的验证码处理

1.我们先进入chrome浏览器的审查页面找到input方法&#xff1a; 为了不少找到一个input&#xff0c;我们ctrlf的方法输入input来查找 看见我们有6个需要输入的参数。 除了上面几个的input参数&#xff0c;我们还需要获取验证码的图片&#xff0c;后续要将字母填入进去。 二.安…

XDMA windos 编译

1、先安装 Visual Studio 2019 2、Download the Windows Driver Kit (WDK) - Windows drivers | Microsoft Learn 以前的 WDK 版本和其他下载 - Windows 驱动程序 |Microsoft学习 注意版本&#xff1a;下载2004的版本 3、 选择使用10.0.19041.0 安装这个sdk. 先按vs2019 然后…

后端SpringBoot+Mybatis 查询订单数据库奇怪报错加一

排错过程&#xff1a; 看报错意思是SQL语句存在错误&#xff0c;然后使用图形化工具运行这个SQL语句 其实这里稍微细心想一下就能发现问题&#xff0c;但是当时没深入想&#xff0c;就觉得order表前加了数据库名字影响不大&#xff0c;所以感觉SQL语句是没问题的&#xff0c;然…

HarmonyOS实战开发-一次开发,多端部署-视频应用

介绍 随着智能设备类型的不断丰富&#xff0c;用户可以在不同的设备上享受同样的服务&#xff0c;但由于设备形态不尽相同&#xff0c;开发者往往需要针对具体设备修改或重构代码&#xff0c;以实现功能完整性和界面美观性的统一。OpenHarmony为开发者提供了“一次开发&#x…

【Java与数学】若不等式x^2-a*x+a<0的解集中恰有3个整数,求a的范围?

【分析】 既然不等式存在解集&#xff0c;说明一元二次方程x^2-a*xa0有解&#xff1b; 解之间横跨三个整数&#xff0c;说明Δ大于0&#xff1b; 三个整数必然是连续的&#xff0c;因为f(x)x^2-a*xa最多只与x存在两个交点&#xff0c;这是题设里的隐含条件。 【传统解法】 …

2024 3.23~3.29周报

上周工作 SVInvNet论文研读 本周计划 加入DenseNet&#xff0c;修改网络架构&#xff0c;跑代码 总结 DenseNet 密集块&#xff1a;DenseNet将网络分成多个密集块&#xff08;Dense Block)。在每个密集块内&#xff0c;每一层都连接到前面所有的层。这种跳跃连接有助于解…

Mac m1 Flink的HelloWorld

首先在官方下载Downloads | Apache Flink 下载好压缩包后解压&#xff0c;得到Flink文件夹 进入&#xff1a;cd flink-1.19.0 ls 查看里面的文件&#xff1a; 执行启动集群 ./bin/start-cluster.sh 输出显示它已经成功地启动了集群&#xff0c;并且正在启动 standalonesessio…

Vue ElementPlus Input输入框

Input 输入框 通过鼠标或键盘输入字符 input 为受控组件&#xff0c;它总会显示 Vue 绑定值。 通常情况下&#xff0c;应当处理 input 事件&#xff0c;并更新组件的绑定值&#xff08;或使用v-model&#xff09;。否则&#xff0c;输入框内显示的值将不会改变。不支持 v-mode…

Oracle 低代码平台 Apex 最新版本 23.2 安装过程

趁春节快结束前&#xff0c;安装了一把APEX &#xff0c;到目前为此&#xff0c;APEX最新版本为23.2&#xff0c;23.2和21版本有一些变化&#xff0c;只是用于验证&#xff0c;我 是使用的单独模式&#xff0c;没有安装TOMAT&#xff0c;下面列一下安装过程&#xff1a; 1.环境…

机器学习——最优化模型

最优化模型的概述&#xff1a; 从某种程度上说&#xff0c;我们的世界是由最优化问题组成的。每一天&#xff0c;我们的生活都面临无数的最优化问题&#xff1a;上班怎么选择乘车路线&#xff0c;才能舒服又快速地到达公司&#xff1b;旅游如何选择航班和宾馆&#xff0c;既省…

[flink 实时流基础] 转换算子

flink学习笔记 数据源读入数据之后&#xff0c;我们就可以使用各种转换算子&#xff0c;将一个或多个DataStream转换为新的DataStream。 文章目录 基本转换算子&#xff08;map/ filter/ flatMap&#xff09;聚合算子&#xff08;Aggregation&#xff09;按键分区&#xff08;…