CSS之3D转换

news/2024/11/28 8:29:01/

三维坐标系

三维坐标系其实就是指立体空间,立体空间是由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.ppmy.cn/news/1550566.html

相关文章

C++第28课-布隆过滤器的介绍

目录 1.布隆过滤器概念 2. 实现原理 3、布隆过滤器的实现 3.1、基本结构 3.2、插入 3.3、查找 4.布隆过滤器的查找 5.布隆过滤器删除 6.如何选择哈希函数个数和布隆过滤器长度 7、测试 8.布隆过滤器小结 布隆过滤器优点 布隆过滤器缺陷 8、海量数据面试题&#xff…

NLP 2、机器学习简介

人生的苦难不过伏尔加河上的纤夫 —— 24.11.27 一、机器学习起源 机器学习的本质 —— 找规律 通过一定量的训练样本找到这些数据样本中所蕴含的规律 规律愈发复杂&#xff0c;机器学习就是在其中找到这些的规律&#xff0c;挖掘规律建立一个公式&#xff0c;导致对陌生的数…

JVM_垃圾收集器详解

1、 前言 JVM就是Java虚拟机&#xff0c;说白了就是为了屏蔽底层操作系统的不一致而设计出来的一个虚拟机&#xff0c;让用户更加专注上层&#xff0c;而不用在乎下层的一个产品。这就是JVM的跨平台&#xff0c;一次编译&#xff0c;到处运行。 而JVM中的核心功能其实就是自动…

Windows远程连接桌面报错“由于没有远程桌面授权服务器可以提供许可证,远程会话连接已断开。请跟服务器管理员联系

摘要 windows server配置了多用户登录&#xff0c;默认自动生成的连接许可证有效日期为120天&#xff0c;超过了这个时间后&#xff0c;用户将不能远程连接服务器。 需要配置多用户服务器&#xff0c;进行获取许可 问题 解决方法 1、win键R打开运行器&#xff0c;使用mstsc …

人工智能走向外太空,成为开发宇宙的未来工具

姓名&#xff1a;赵子健 学号&#xff1a;22021211991 转载自&#xff1a;https://zhuanlan.zhihu.com/p/30991758 【嵌牛导读】人工智能走向外太空&#xff0c;成为开发宇宙的未来工具 【嵌牛鼻子】人工智能 外太空 开发宇宙 未来工具 【嵌牛提问】人工智能是否适用于外太空…

YOLO的框架及版本迭代

YOLO&#xff08;You Only Look Once&#xff09;是一种非常流行的实时目标检测算法&#xff0c;其特点是将目标检测任务转换为一个回归问题&#xff0c;通过一次前向传播就可以同时完成目标的分类和定位。以下是YOLO框架的整体架构和工作原理&#xff1a; 一、YOLO的基本框架…

d3-contour 生成等高线图

D3.js 是一个强大的 JavaScript 库&#xff0c;用于创建动态、交互式数据可视化。d3-contour 是 D3.js 的一个扩展模块&#xff0c;用于生成等高线图&#xff08;contour plots&#xff09;。 属性和方法 属性 x: 一个函数&#xff0c;用于从数据点中提取 x 坐标。y: 一个函…

RK3568平台(USB篇)USB Gadget 驱动

一.什么是 USB Gadget 驱动 USB 设备驱动,按照设备端关联的 USB 控制器 是工作在 主模式 还是 从模式,分为 USB 设备主机侧驱动 (主模式),或者 USB 设备从机侧驱动 (从模式)。同时,工作在 主模式 的 USB 控制器,称为 USB 主机控制器 (UHC: USB Host Controller),工作在 …