FlipImage：探索CSS 3D变换与图像翻转

在Web开发中，图像操作是提升用户体验的重要技术之一。FlipImage项目通过实现图像的2D翻转效果，展示了CSS 3D变换的强大功能。本文将深入探讨这个项目的技术实现和设计思路。

项目概述

FlipImage是一个基于原生HTML、CSS和JavaScript的图像翻转应用。它在一个2×2网格中显示同一张图片，用户可以通过方向按钮对任意图片进行垂直或水平翻转操作。

这个项目来源于app-ideas开源项目，这是一个为Web开发者提供练习项目的优秀资源库。app-ideas按照难度等级分类，从初学者到高级项目，帮助开发者通过实际项目提升编程技能。FlipImage属于1-Beginner级别，是学习CSS 3D变换和JavaScript事件处理的理想入门项目。

项目来源： Flip-Image-App - app-ideas
项目演示： FlipImage 在线演示
项目源码： FlipImage GitHub 仓库

核心功能

• 2×2网格布局：使用CSS Grid实现响应式布局
• 四方向翻转：支持上下左右四个方向的翻转效果
• 动态图片加载：支持通过URL输入更换图片
• 错误处理：包含图片加载失败的错误提示机制

日语的活用

日语动词具有活用的概念，即动词形态会根据语法功能发生变化。活用主要承担表达以下句子责任：

• 时态（如现在、过去）

• 肯定与否定

• 语气（如命令、意志、假定等）

• 敬语层次（敬体与普通体的区别）

• 句子成分连接（通过活用形连接后续助动词或句子成分）

这些功能都是通过改变动词词尾或形态实现的，使得动词能够准确反映说话者的意图和句子结构。

在印欧语言中，也存在类似的动词变位（conjugation）现象，动词会根据人称、时态、语气等发生形态变化。但相比之下，汉语动词则没有活用或变位的概念，更多依赖语序和辅助词来表达时态、语气和否定等语法功能。

一、标准形式

\[ \begin{equation} \mathbf{x}'(t)=A\mathbf{x}(t) \end{equation}\tag{1.1} \]

其中，系数矩阵 \(A=\begin{pmatrix}a&b\\c&d\end{pmatrix}\) ，且 \(a,b,c,d\in\mathbb{R}\)。

三重积分

想象我们的空间是欧几里得式的，我们可以用三维直角坐标系来描述空间中每一个点的位置 \((x,y,z)\)。进一步设想，空间中的每一个点都像一个“抽屉”，而每个抽屉里面存放着一个数字。我们可以将之描述为每个坐标 \((x,y,z)\) 映射着一个函数值 \(f(x,y,z)\)。在这样的设想下，给定一个有限的空间 \(\Omega\) （例如，一个从原点出发，在 \(x\)、\(y\)、\(z\) 方向上分别延伸 \(a\)、\(b\)、\(c\) 个单位长度的长方体），我们想要知道这个空间中所有抽屉里存放的数字之和，应当如何表达？

我们需要找到一条“路”，这条路连接着 \(\Omega\) 中所有的抽屉。然后我们沿着这条路走，把抽屉一个一个打开，看看里面的数字是多少，然后把它们全部加起来。这条路需要有一个特点，那就是不能重复经过同一个抽屉，我们要确保每个抽屉只被查看一次。

我们可以设想这个路程就是体积 \(V\)，而我们每次从上一个抽屉走到下一个抽屉的步长为体积微元 \(\mathrm{d} V\)。我们有三种常见的走法：

• 直角坐标系： \(\mathrm{d} V = \mathrm{d} x\ \mathrm{d} y\ \mathrm{d} z\)

• 柱坐标系： \(\mathrm{d} V =\mathrm{d} r\ (r\ \mathrm{d} \theta)\ \mathrm{d} z =r\ \mathrm{d} r\ \mathrm{d} \theta\ \mathrm{d} z\)

• 球坐标系： \(\mathrm{d} V =\mathrm{d} \rho\ (\rho\ \sin{\phi}\ \mathrm{d}\theta)\ (\rho\ \mathrm{d}\phi)=\rho^2\ \sin\phi\ \mathrm{d}\rho\ \mathrm{d}\theta\ \mathrm{d}\phi\)

图示取自 openstax 教材 Calculus Volume 3: 5.5 Triple Integrals in Cylindrical and Spherical Coordinates

我们便可以通过三重积分来表达这个总和（以直角坐标系为例）：

\[ \begin{aligned} &\iiint_\Omega f(x,y,z)\ \mathrm{d}V = \iiint_\Omega f(x,y,z)\ \mathrm{d}x\ \mathrm{d}y\ \mathrm{d}z,\\[12pt] &\Omega = \{(x,y,z)\in \mathbb{R}^3\mid 0 \le x \le a,\ 0 \le y \le b,\ 0 \le z \le c\}. \end{aligned} \]

这个抽屉模型可以套用到许多实际问题中：

• 当 \(f(x,y,z)\) 表示密度函数时，积分结果表示整个区域内的总质量；

• 当 \(f(x,y,z)\) 表示电荷密度时，积分给出该区域内的总电荷量；

三重积分可以作为连接空间分布函数和物理世界总量之间的桥梁。

平面一阶齐次线性微分方程组

1. 前言

所用教材：The Ordinary Differential Equations Project - Thomas W. Judson
对应教材第三章的第3.1节到第3.6节的内容，只涉及平面（二维）情况下的线性组。这对于直接学习 \(n\) 维线性组是一个很好的过渡。

一阶线性微分方程是形如

\[ \frac{\mathrm{d} y}{\mathrm{d} x} + p(x)y = f(x) \]

的方程。且当 \(f(x)=0\) 时，方程被称为一阶齐次线性微分方程：

\[ \frac{\mathrm{d} y}{\mathrm{d} x} + p(x)y = 0 \]

本文讨论的主题是在一阶齐次线性微分方程基础上，讨论由两个一阶齐次线性微分方程构成的方程组，其形如：

\[ \left\{ \begin{aligned} \frac{\mathrm{d}x}{\mathrm{d}t} = ax + by \\ \frac{\mathrm{d}y}{\mathrm{d}t} = cx + dy \end{aligned} \right. \]

为了之后的分析，我们令

\[ A =\begin{pmatrix}a & b \\c & d\end{pmatrix},\ \mathbf{x} =\begin{pmatrix}x(t) \\ y(t)\end{pmatrix} \]

那么，我们有

\[ \begin{pmatrix}x'(t) \\y'(t)\end{pmatrix}=\begin{pmatrix}a x(t) + b y(t) \\ c x(t) + d y(t)\end{pmatrix}=\begin{pmatrix}a & b \\ c & d\end{pmatrix}\begin{pmatrix}x(t) \\ y(t)\end{pmatrix}. \]

也可以写作

\[ \mathbf{x'} = A \mathbf{x}. \]

我们开始研究如何得到 \(x(t)\) 和 \(y(t)\) 的通解。

逻辑斯蒂函数

逻辑斯蒂函数由比利时数学家皮埃尔·弗朗索瓦·韦吕勒（Pierre François Verhulst，1804 - 1849）提出，并在后来的岁月中被他人证实，已成为生物检定中的基本工具之一，并且在统计学、经济学和流行病学等多个领域得到了越来越广泛的应用。

逻辑斯蒂函数的微分形式

\[ \begin{equation} \frac{\mathrm{d} P(t)}{\mathrm{d} t} = rP(t)\left(1-\frac{P(t)}{K}\right) \end{equation} \]

• \(P(t)\) 是种群在时间 \(t\) 的大小
• \(r\) 是种群的增长率
• \(K\) 是环境的承载能力

逻辑斯蒂函数

\[ \begin{equation} P(t) = \frac{K P_0 e^{rt}}{K+P_0(e^{rt} - 1)} \end{equation} \]

其中 \(P_0\) 是初始种群大小。逻辑斯蒂函数的图像呈S形，表示种群在初期快速增长，随后逐渐减缓，最终趋于稳定。

思路

不需要“知道”无理数是多少，只要知道所有比它小的有理数和所有比它大的有理数就足以“界定”它。

这篇文章主要想要讨论如何从有理数\(\mathbb{Q}\)构建实数\(\mathbb{R}\)。不讨论构造实数的动机。
内容基本上来自Baby Rudin，用的是戴德金分割构造实数。当作自我练习而写的文章。

有理数\(\mathbb{Q}\)

让我们回顾\(\mathbb{Q}\)的性质

\(\mathbb{Q}\)是一个集合(Set)

\[ \mathbb{Q}=\left\{ x : x = \frac{p}{q}\text{ where } p,q \in \mathbb{Z} \text{ and } q\neq 0 \right\} \]

接着，\(\mathbb{Q}\)是一个有序集合(Ordered Set)，但在此之前我们先声明序(Order)的定义

几何光学

几何光学(Geometrical optics, ray optics)，是将光视作光线(ray)，以研究光的传播特性的光学模型。

几何光学不考虑某些光学特性，比如光的波动性。另外，本文只涉及平面几何，图例均使用PhyDemo制作。本文在研究物像大小关系时，只考虑高度的缩放。

几何光学三定律

1. 光的直线传播定律(The law of rectilinear propagation)

在同一均匀介质中，光沿直线传播。

2. 光的反射定律(The law of reflection)

当光遇到物体表面时，会发生反射。此时：

• 入射光线、反射光线和法线处于同一平面

• 反射角等于入射角

示意图如下：

一阶线性微分方程求解的两种方法

定义

一阶线性微分方程(A first order linear differential equation)是能够被表示为以下形式的等式:

\[ \frac{d y}{d x} + p(x)y = f(x) \]

当\(f(x)=0\)时，等式被称作一阶齐次线性微分方程(A first order homogeneous linear differential equation):

\[ \frac{d y}{d x} + p(x)y = 0 \]

求解：一阶齐次线性微分方程

在求解一阶线性微分方程之前，我们需要先了解一阶齐次线性微分方程的求解方法。

一阶齐次线性微分方程\(\frac{dy}{dx} + p(x)y = 0\)的通解(the general solution)为：

\[ y = C_1 e^{- P(x)} \]

为方便起见，令\(\int p(x) dx = P(x)\)。（在后续的内容中，我们将遵从这个约定。）

证明：

\[ \begin{aligned} \frac{dy}{dx} + p(x)y &= y \\ \frac{dy}{dx} &= -p(x)y \\ \frac{1}{y} dy &= -p(x) dx \\ \int \frac{1}{y} dy &= - \int p(x) dx \\ \ln{|y|} &= - P(x) + C \\ |y| &= e^{- P(x) + C} \\ y &= \pm e^{C} e^{- P(x)} \\ y &= C_1 e^{- P(x)} \hspace{1cm}\blacksquare \end{aligned} \]

其中，\(C_1 = \pm e^{C}\)。

三角函数常用公式

这篇笔记用于记录一些我在学习过程中经常使用到的三角函数公式。我会给我认为关键的几个公式列出证明。

定义 \(\sin,\cos,和\tan.\)

\[ \cos(\theta)=\frac{x}{r} \]

\[ \sin(\theta)=\frac{y}{r} \]

\[ \tan(\theta)=\frac{\sin(\theta)}{\cos(\theta)}=\frac{y}{x} \]

其中，\(r\)代表圆半径。

另外，我在网上发现的一个优秀的三角函数可视化作品：The Etymology of Trig Functions

基本定理

\[ \cos(-\theta)=\cos(\theta) \]

\[ \sin(-\theta)=-\sin(\theta) \]

\[ \frac{d \cos(\theta)}{d t}=-\sin(\theta) \]

\[ \frac{d \sin(\theta)}{d t}=\cos(\theta) \]

\[ \cos^2(\theta)+\sin^2(\theta)=1 \]

\[ \sin(\alpha)=\cos(\beta)\text{, where }\alpha+\beta=\frac{\pi}{2}. \]

这一部分内容直接记忆，难度不大。