css3 2D与3D转换

css3 2D与3D转换

  • 前言
  • 2D变形
    • 旋转变形 rotate()
      • transform-origin属性
    • 缩放变形 scale()
    • 斜切变形 skew()
    • 位移变形 translate()
  • 3D变形
    • 3D旋转 rotateX() | rotateY()
      • perspective属性
    • 空间移动
  • 制作一个正方体
  • 结语

前言

网页设计不再局限于平面,而是充满了立体感和动态效果。CSS3的2D与3D转换技术就像一把魔法棒,让我们能够在页面中创造出引人入胜的立体效果。本文将带你踏入这个维度,探索CSS3转换的奇妙之处。

2D变形

旋转变形 rotate()

将transform属性的值设置为rotate(),即可实现旋转变形
在这里插入图片描述
若角度为正,则顺时针方向旋转,否则逆时针方向旋转

transform-origin属性

可以使用transform-origin属性设置自己的自定义变换原点

transform-origin:0 0;  //表示以左上角作为中心点

缩放变形 scale()

将transform属性的值设置为scale(),即可实现缩放变形

transform:scale(3);  //3表示缩放的倍数,当数值小于1时,表示缩小元素,大于1时,表示放大元素

斜切变形 skew()

将transform属性的值设置为skew(),即可实现斜切变形
在这里插入图片描述

位移变形 translate()

将transform属性的值设置为translate(),即可实现位移变形
在这里插入图片描述
位移变形和相对定位非常像,位移变形也会“老家留坑”,“形影分离”,兼容到ie9

3D变形

3D旋转 rotateX() | rotateY()

将transform属性的值设置为rotateX()或者rotateY(),即可实现绕横轴、纵轴旋转
在这里插入图片描述

perspective属性

perspective属性用来定义透视强度,可以理解为“人眼到舞台的距离”,单位是px
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width,initial-scale=1, user-scalable=no, maximum-scale=1,minimum-scale=1"><!-- width=device-width, initial-scale=1.0 页面的宽度应该等于设备的宽度,并且初始缩放级别为 1.0。这有助于确保在移动设备上以正常大小呈现页面,而不是被过度缩放。 --><title>Document</title><style>* {margin: 0;padding: 0;}p {width: 200px;height: 200px;border: 1px solid #000;background-color: orange;transform: rotateX(30deg);}.box1 {width: 202px;height: 202px;border: 1px solid #000;margin: 50px auto;perspective: 300px;}</style>
</head><body><div class="box1"><p> </p></div></body></html>

空间移动

当元素进行3D旋转后,即可继续添加translatex()、translateY()、translatez()属性让元素在空间进行移动
在这里插入图片描述
**一定记住:**空间移动要添加在3D旋转之后

transform:rotateX(30deg) translateX(30px) translateZ(100px);

制作一个正方体

正方体的每个面都是从舞台经过不同的3D旋转、空间移动到自己的位置的

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width,initial-scale=1, user-scalable=no, maximum-scale=1,minimum-scale=1"><!-- width=device-width, initial-scale=1.0 页面的宽度应该等于设备的宽度,并且初始缩放级别为 1.0。这有助于确保在移动设备上以正常大小呈现页面,而不是被过度缩放。 --><title>Document</title><style>* {margin: 0;padding: 0;}.box1 {width: 202px;height: 202px;border: 1px solid #000;margin: 200px auto;perspective: 300px;position: relative;}p {width: 200px;height: 200px;position: absolute;top: 0;left: 0;}.box1 p:nth-child(1) {background: rgb(62 255 244 / 73%);/* 前面 */transform: translateZ(100px)}.box1 p:nth-child(2) {background: rgba(242, 255, 62, 0.959);/* 顶面 */transform: rotateX(90deg) translateZ(100px)}.box1 p:nth-child(3) {background: rgba(65, 62, 255, 0.73);/* 背面 */transform: rotateX(180deg) translateZ(100px)}.box1 p:nth-child(4) {background: rgba(62, 255, 120, 0.73);/* 底面 */transform: rotateX(-90deg) translateZ(100px)}.box1 p:nth-child(5) {background: rgb(255, 122, 34);/* 侧面 */transform: rotateY(90deg) translateZ(100px)}.box1 p:nth-child(6) {background: rgba(255, 62, 72, 0.73);/* 侧面 */transform: rotateY(-90deg) translateZ(100px)}</style>
</head><body><div class="box1"><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p></div>
</body></html>

结语

通过深入了解CSS3的2D与3D转换,你将能够为网页设计注入更多创意和交互性。这不仅是技术的提升,更是对设计艺术的追求。让我们一同穿越维度的大门,用转换打破平面的界限,创造出引人入胜的用户体验。

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

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

相关文章

人工智能主流技术详解

人工智能&#xff08;Artificial Intelligence&#xff0c;简称AI&#xff09;是当今科技领域发展最迅速、最令人振奋的分支之一。本文将带您深入了解人工智能的主流技术&#xff0c;探索AI如何影响我们的生活、工作以及未来的发展。 一、什么是人工智能&#xff1f; 人工智能&…

烟火检测AI边缘计算智能分析网关V4在安防项目中的应用及特点

一、行业背景 随着社会和经济的发展&#xff0c;公共安全和私人安全的需求都在不断增长。人们需要更高效、更准确的安防手段来保障生命财产安全&#xff0c;而人工智能技术正好可以提供这种可能性&#xff0c;通过智能监控、人脸识别、行为分析等手段&#xff0c;大大提高了安防…

非线性方程求根迭代法(C++)

文章目录 问题描述算法描述不动点迭代法一维情形多维情形 牛顿迭代法单根情形重根情形 割线法抛物线法逆二次插值法 算法实现准备工作一般迭代法割线法抛物线法逆二次插值法 实例分析例1例2 迭代法是一种求解非线性方程根的方法, 它通过构造一个迭代过程, 将一个非线性方程转化…

ssm基于web办事大厅政务预约系统+vue论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本办事大厅政务预约系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据…

【MySQL】聚合函数

文章目录 聚合函数是什么&#xff1f;一、AVG和SUM函数二、MIN和MAX函数三、COUNT函数四、GROUP BY1. 基本使用2. 使用多个列分组3. GROUP BY中使用WITH ROLLUP 五、HAVING1. 基本使用2. HAVING 与 WHERE 的区别 六、SELECT的执行过程1. 查询结构2. SELECT执行顺序 综合练习 聚…

关于浏览器下载的时候出现失败,网络错误

我试过所有浏览器&#xff0c;谷歌&#xff0c;firefox,qq浏览器&#xff0c;还是edge都不好使&#xff0c; 1.看网上说是http debugger的问题&#xff0c;但是我没有找到这个服务项 2.也有说可以通过修改或设置下载路径解决 -------- 我通过下载一个叫xdm的软件&#xff…

web前端算法简介之字典与哈希表

回顾 栈、队列 &#xff1a; 进、出 栈&#xff08;Stack&#xff09;&#xff1a; 栈的操作主要包括&#xff1a; 队列&#xff08;Queue&#xff09;&#xff1a; 队列的操作主要包括&#xff1a; 链表、数组 &#xff1a; 多个元素存储组成的 简述链表&#xff1a;数组&…

【Java】IDEA中的JFormDesigner使用教程

目录 1 安装 JFormDesigner 插件2 JFormDesigner 使用教程2.1 新建JFormDesigner Form时的选项2.2 JFormDesigner Form界面布局2.3 JFormDesigner 常用组件 JFormDesigner 是一款用于设计和创建图形用户界面&#xff08;GUI&#xff09;的插件&#xff0c;它允许开发者使用可视…

ZZULIOJ 1112: 进制转换(函数专题)

题目描述 输入一个十进制整数n&#xff0c;输出对应的二进制整数。常用的转换方法为“除2取余&#xff0c;倒序排列”。将一个十进制数除以2&#xff0c;得到余数和商&#xff0c;将得到的商再除以2&#xff0c;依次类推&#xff0c;直到商等于0为止&#xff0c;倒取除得的余数…

ZZULIOJ 1110: 最近共同祖先(函数专题)

题目描述 如上图所示&#xff0c;由正整数1, 2, 3, ...组成了一棵无限大的二叉树。从某一个结点到根结 点&#xff08;编号是1 的结点&#xff09;都有一条唯一的路径&#xff0c;比如从10 到根结点的路径是(10, 5, 2, 1)&#xff0c; 从4 到根结点的路径是(4, 2, 1)&#xff0…

xtu oj 1340 wave

题目描述 一个n列的网格&#xff0c;从(0,0)网格点出发&#xff0c;波形存在平波(从(x,y)到(x1,y))&#xff0c;上升波(从(x,y)到(x1,y1))&#xff0c;下降波(从(x,y)到(x1,y−1))三种波形&#xff0c;请问从(0,0)出发&#xff0c;最终到达(n,0)的不同波形有多少种&#xff1f…

关于 setData 同步异步的问题

小程序官方文档中的回答解释: 所以大概意思就是: 1.setData在逻辑层的操作是同步&#xff0c;因此this.data中的相关数据会立即更新,比如下面的例子: const a 1 this.setData({b: a ? a : , }) console.log(that.data.b) // 1 2. setData在视图层的操作是异步&#xff0c;…

本地开发环境请求服务器接口跨域的问题(vue的问题)

上面的这个报错大家都不会陌生&#xff0c;报错是说没有访问权限&#xff08;跨域问题&#xff09;。本地开发项目请求服务器接口的时候&#xff0c;因为客户端的同源策略&#xff0c;导致了跨域的问题。下面先演示一个没有配置允许本地跨域的的情况&#xff1a; 可以看到&…

Android可换行的RadioGroup

Android可换行的RadioGroup,有时候需要换行显示的单选列表&#xff0c;当然可以有多种实现方式&#xff0c;比如recycleview或者listview实现&#xff0c;本文采用的是RadioGrouprediobutton方式实现。由于RadioGroup仅支持水平布局与垂直布局&#xff0c;故需要自定义控件实现…

jenkins-cl参数化构建

pipeline片段&#xff08;对应jenkins-cli -p参数的BRANCHdevelop&#xff09; parameters {string(name: BRANCH, defaultValue: master, description: Enter the branch name)}stages {stage(Get Code) {steps {script {def branch params.BRANCHcheckout scmGit(branches: …

2024/1/14周报

文章目录 摘要Abstract文献阅读题目问题与创新方法A.CEMDAN方法B.LSTM网络C. CEEMDAN-LSTM模型 实验过程数据集与数据预处理参数设置评价指标和参数 实验结果 深度学习GRUGRU前向传播GRU的训练过程 总结 摘要 本周阅读了一篇基于CEEMDAN-LSTM的金融时间序列预测模型的文章&…

性能分析与调优: Linux 实现 缺页剖析与火焰图

目录 一、实验 1.环境 2.缺页(RSS增长)剖析与火焰图 一、实验 1.环境 &#xff08;1&#xff09;主机 表1-1 主机 主机架构组件IP备注prometheus 监测 系统 prometheus、node_exporter 192.168.204.18grafana监测GUIgrafana192.168.204.19agent 监测 主机 node_exporter…

redis夯实之路-集群详解

Redis有单机模式和集群模式。 集群是 Redis 提供的分布式数据库方案&#xff0c;集群通过分片( sharding )来实现数据共享&#xff0c;并提供复制和故障转移。集群模式可以有多个 master 。使用集群模式可以进一步提升 Redis 性能&#xff0c;分布式部署实现高可用性&#xff…

【Java 干货教程】Java实现分页的几种方式详解

一、前言 无论是自我学习中&#xff0c;还是在工作中&#xff0c;固然会遇到与前端搭配实现分页的功能&#xff0c;发现有几种方式&#xff0c;特此记录一下。 二、实现方式 2.1、分页功能直接交给前端实现 这种情况也是有的&#xff0c;(根据业务场景且仅仅只能用于数据量…

6、C语言:输入与输出

输入输出 标准输入输出getchar&putchar函数printf函数sprintf函数格式化输入——scanf函数 文件访问文件读写 错误处理&#xff1a;stderr和exit行输入和行输出常用函数字符串操作函数字符类别测试和转换函数存储管理函数数学函数随机数发生器函数其他 标准输入输出 getch…