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

css3D变换用法

news 2026/2/9 20:42:11

文章目录

      • CSS3D变换详解及代码案例
        • 一、CSS3D变换的基本概念
        • 二、3D变换的开启与景深设置
        • 三、代码案例

CSS3D变换详解及代码案例

CSS3D变换是CSS3中引入的一种强大功能，它允许开发者在网页上创建三维空间中的动画和交互效果。通过CSS3D变换，你可以实现元素的3D位移、旋转、缩放和倾斜，从而创建出更加生动和立体的用户体验。本文将详细介绍CSS3D变换的用法，并通过代码案例进行详细说明。

一、CSS3D变换的基本概念

  1. 3D空间坐标系

    与2D平面坐标系不同，3D空间坐标系包含X轴、Y轴和Z轴。X轴水平向右，Y轴垂直向下，Z轴垂直于屏幕（向屏幕内为负值，向屏幕外为正值）。

  2. 常用的3D转换属性

    • translate3d(x, y, z): 沿X、Y、Z轴平移。
    • rotate3d(x, y, z, angle): 自定义3D旋转，其中x、y、z指定旋转的轴，angle指定旋转的角度。
    • scale3d(x, y, z): 自定义3D缩放，其中x、y、z分别指定在X、Y、Z轴上的缩放比例。
    • skew3d(x, y, z, angle): 自定义3D倾斜。
二、3D变换的开启与景深设置

要使用CSS3D变换，首先需要开启3D空间。这可以通过在父元素上设置transform-style: preserve-3d;来实现。此外，为了产生透视效果，还需要设置景深，这可以通过perspective属性来实现。

  • transform-style: preserve-3d;: 让子元素位于此元素的三维空间内。
  • perspective: length;: 指定观察者距离z=0平面的距离，从而产生透视效果。
三、代码案例
  1. 3D平移示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D 平移示例</title><style>.container {width: 200px;height: 200px;perspective: 500px; /* 设置景深 */margin: 100px auto;}.box {width: 100px;height: 100px;background-color: red;transform: translate3d(50px, 50px, 100px); /* 沿X轴平移50px，沿Y轴平移50px，沿Z轴平移100px */}</style>
</head>
<body><div class="container"><div class="box"></div></div>
</body>
</html>

在这个例子中，我们创建了一个包含.container和.box的HTML结构。通过为.container设置perspective属性，我们为容器创建了一个透视视角。然后，我们通过transform: translate3d(50px, 50px, 100px);将.box元素在三维空间中进行了平移。

  1. 3D旋转示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D 旋转示例</title><style>.container {width: 200px;height: 200px;perspective: 500px; /* 设置景深 */margin: 100px auto;}.box {width: 100px;height: 100px;background-color: blue;transform-style: preserve-3d; /* 保留3D效果 */animation: rotate 5s infinite linear; /* 添加旋转动画 */}@keyframes rotate {0% {transform: rotateY(0deg);}100% {transform: rotateY(360deg);}}</style>
</head>
<body><div class="container"><div class="box"></div></div>
</body>
</html>

在这个例子中，我们创建了一个包含.container和.box的HTML结构，并为.box元素添加了一个旋转动画。通过@keyframes定义了一个名为rotate的动画，它使.box元素在Y轴上无限旋转。通过设置transform-style: preserve-3d;，我们保留了.box元素的3D效果。

  1. 3D缩放与倾斜示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D 缩放与倾斜示例</title><style>.container {width: 200px;height: 200px;perspective: 500px; /* 设置景深 */margin: 100px auto;}.box {width: 100px;height: 100px;background-color: green;transform: scale3d(1.5, 1.5, 1.5) skew3d(0, 1, 0, 30deg); /* 缩放并倾斜 */}</style>
</head>
<body><div class="container"><div class="box"></div></div>
</body>
</html>

在这个例子中，我们创建了一个包含.container和.box的HTML结构，并通过transform: scale3d(1.5, 1.5, 1.5) skew3d(0, 1, 0, 30deg);将.box元素在三维空间中进行了缩放和倾斜。

相关文章：

css3D变换用法

文章目录 CSS3D变换详解及代码案例一、CSS3D变换的基本概念二、3D变换的开启与景深设置三、代码案例 CSS3D变换详解及代码案例 CSS3D变换是CSS3中引入的一种强大功能&#xff0c;它允许开发者在网页上创建三维空间中的动画和交互效果。通过CSS3D变换&#xff0c;你可以实现元素…...

编程日记 2024/11/11 10:17:30

Rust：启动与关闭线程

在 Rust 编程中&#xff0c;启动和关闭线程是并发编程的重要部分。Rust 提供了强大的线程支持&#xff0c;允许你轻松地创建和管理线程。下面将详细解释如何在 Rust 中启动和关闭线程。 启动线程 在 Rust 中&#xff0c;你可以使用标准库中的 std::thread 模块来创建和启动新…...

编程日记 2024/11/11 10:13:25

Ubuntu 的 ROS 2 操作系统安装与测试

引言 机器人操作系统&#xff08;ROS, Robot Operating System&#xff09;是一种广泛应用于机器人开发的开源框架&#xff0c;提供了丰富的库和工具&#xff0c;支持开发者快速构建、控制机器人并实现智能功能。 当前&#xff0c;ROS 2 的最新长期支持版本为 Humble Hawksbil…...

编程日记 2024/11/11 10:12:23

在双显示器环境中利用Sunshine与Moonlight实现游戏串流的同时与电脑其他任务互不干扰

我和老婆经常会同时需要操作家里的电脑&#xff0c;在周末老婆有时要用电脑加班上网办公&#xff0c;而我想在难得的周末好好地Game一下&#xff08;在客厅用电视机或者平板串流&#xff09;&#xff0c;但是电脑只有一个&#xff0c;以往我一直都是把电脑让给老婆&#xff0c;…...

编程日记 2024/11/11 10:08:18

ElasticSearch备考 -- Cross cluster replication（CCR）

一、题目 操作在cluster1&#xff08;local&#xff09;中操作索引task&#xff0c;复制到cluster2&#xff08;remote&#xff09;中 二、思考 CCR 我们可以对标MySQL 理解为为主从&#xff0c;后者备份。主节点负责写入数据&#xff0c;从/备节点负责同步时主节点的数据。 …...

编程日记 2024/11/11 10:06:15

windows C#-异常处理

C# 程序员使用 try 块来对可能受异常影响的代码进行分区。 关联的 catch 块用于处理生成的任何异常。 finally 块包含无论 try 块中是否引发异常都会运行的代码&#xff0c;如发布 try 块中分配的资源。 try 块需要一个或多个关联的 catch 块或一个 finally 块&#xff0c;或两…...

编程日记 2024/11/11 10:05:14

边缘计算在智能制造中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 边缘计算在智能制造中的应用 边缘计算在智能制造中的应用 边缘计算在智能制造中的应用 引言 边缘计算概述 定义与原理 发展历程 …...

编程日记 2024/11/11 10:04:13

点云开发：从入门到精通的全面教程

简介 点云技术已成为计算机视觉、自动驾驶、3D重建等领域的重要组成部分。本教程旨在引导你从零基础开始学习点云开发&#xff0c;深入理解其背后的数学原理&#xff0c;并提供实用的开发技巧。 章节目录 点云技术概述 点云的定义及应用场景点云数据的来源和采集工具点云数据…...

编程日记 2024/11/11 10:03:12

【含文档】基于ssm+jsp的商店会员系统（含源码+数据库+lw）

1.开发环境 开发系统:Windows10/11 架构模式:MVC/前后端分离 JDK版本: Java JDK1.8 开发工具:IDEA 数据库版本: mysql5.7或8.0 数据库可视化工具: navicat 服务器: apache tomcat 主要技术: Java,Spring,SpringMvc,mybatis,mysql,vue 2.视频演示地址 3.功能 系统定义了两个…...

编程日记 2024/11/11 10:02:11

【大数据学习 | kafka高级部分】文件清除原理

2. 两种文件清除策略 kafka数据并不是为了做大量存储使用的&#xff0c;主要的功能是在流式计算中进行数据的流转&#xff0c;所以kafka中的数据并不做长期存储&#xff0c;默认存储时间为7天 那么问题来了&#xff0c;kafka中的数据是如何进行删除的呢&#xff1f; 在Kafka…...

编程日记 2024/11/11 10:00:09

dolphin 配置data 从文件导入hive 实践（一）

datax 支持多种数据源的相互读写&#xff0c;作为开源软件&#xff0c;提供了离线采集功能&#xff0c;方便系统开发&#xff0c;过程中遇到诸多配置&#xff0c;需要开发者自己探索&#xff0c;免费同样有成本 配置模板 {"setting": {},"job": {"s…...

编程日记 2024/11/11 9:59:08

Docker Compose部署Rabbitmq(脚本下载延迟插件)

整个工具的代码都在Gitee或者Github地址内 gitee&#xff1a;solomon-parent: 这个项目主要是总结了工作上遇到的问题以及学习一些框架用于整合例如:rabbitMq、reids、Mqtt、S3协议的文件服务器、mongodb github&#xff1a;GitHub - ZeroNing/solomon-parent: 这个项目主要是…...

编程日记 2024/11/11 9:56:03

麦当劳自助点餐机——实现

餐厅自助点餐优点 1. 降低服务成本&#xff1a; - 减少了对服务员数量的需求&#xff0c;降低了人力成本。 - 减轻了服务员的工作负担&#xff0c;使其能够更专注于提供优质的服务&#xff0c;如解决顾客的特殊需求和处理复杂问题。 2. 提升点餐效率和准确性&#xf…...

编程日记 2024/11/11 9:55:02

C++ STL CookBook 6：STL Containers （I）

目录 顺序容器 关联容器 容器适配器 使用统一擦除函数从容器中删除指定项 在恒定时间内对一个对排序不敏感的vector中删除项目 如果不确定自己访问容器会不会越界&#xff0c;那就使用.at方法而不是[] 在我们开始之前&#xff0c;先来回顾一下传统的经典的几个容器&#…...

编程日记 2024/11/11 9:54:01

行转列实现方式总结

前言 在日常开发中遇到了&#xff0c;需要对表中数据某个字段行数据转成列&#xff0c;个人觉得这中做目前想到两种&#xff0c; 一种是sql 操作&#xff0c; 另一种代码中做逻辑处理。 方式一 Java 操作 import lombok.Data;import java.util.ArrayList; import java.util.H…...

编程日记 2024/11/11 9:51:58

【go从零单排】初探goroutine

&#x1f308;Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 &#x1f4d7;概念 Goroutines 是 Go 语言中的一种轻量级线程&#xff0c;用于并发编程。它们允许程…...

编程日记 2024/11/11 9:50:56

HarmonyOS NEXT应用元服务开发Intents Kit（意图框架服务）本地搜索接入方案

一、方案概述 当用户使用应用/元服务时&#xff0c;开发者可以按照标准意图Schema向系统共享数据&#xff0c;并支持意图调用&#xff08;空调用与传参调用&#xff09;&#xff0c;以实现用户点击卡片后&#xff0c;可后台执行功能&#xff08;例如播放指定歌曲&#xff09;或…...

编程日记 2024/11/11 9:49:55

C语言可变参数列表编程实战指南：从基础概念到高级应用的全面解析

引言 在C语言中&#xff0c;可变参数列表的功能使得函数能够灵活地处理不确定数量的输入参数。本文将深入探讨可变参数列表的基础概念、技术原理及其在实际编程中的应用&#xff0c;帮助开发者更好地理解和使用这一特性。 一、可变参数列表的基本概念 1.1 什么是可变参数列表…...

编程日记 2024/11/11 9:41:45

AndroidStudio-文本显示

一、设置文本的内容 1.方式&#xff1a; &#xff08;1&#xff09;在XML文件中通过属性&#xff1a;android:text设置文本 例如&#xff1a; <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.andr…...

编程日记 2024/11/11 9:40:44

HBuilderX运行微信小程序，编译的文件在哪，怎么运行

1. 点击HBuilderX顶部的运行-运行到小程序模拟器-微信开发者工具&#xff0c;就会开始编译 2. 编译完成后的文件在根目录找到 unpackage -- dist -- dev -- mp-weixin, 这里面就是编译后的文件&#xff0c;如果未跳转到开发者工具&#xff0c;那可能是没设置启动路径&#xff0…...

编程日记 2024/11/11 9:38:42

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2026/2/4 4:25:40

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

编程新知 2026/1/29 20:58:41

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

编程新知 2026/1/31 8:08:07

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2026/1/28 11:11:03

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

编程新知 2025/11/25 22:46:30

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

编程新知 2025/11/29 21:26:48

聊一聊接口测试的意义有哪些？

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

编程新知 2025/10/14 6:46:13

RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

编程新知 2026/1/20 17:16:46

招商蛇口 | 执笔CID，启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

编程新知 2026/1/26 8:13:33

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

编程新知 2026/1/31 8:55:37