CSS 固定頂部底部翻轉(zhuǎn)是一種使用 CSS 進行頁面布局的技術，可以實現(xiàn)將頁面上的元素固定在某個位置，并翻轉(zhuǎn)頁面底部和頂部的元素。

通常情況下，當頁面中存在大量文本時，使用 CSS 固定頂部和底部翻轉(zhuǎn)可以優(yōu)化頁面的排版和視覺效果，使頁面看起來更加清晰和易于閱讀。

固定頂部和底部翻轉(zhuǎn)的實現(xiàn)方法有多種，其中最常見的方法是使用 transform 屬性和 position: absolute 和 position: relative 屬性。使用 transform 屬性可以將元素向上或向下移動，而使用 position: absolute 屬性可以將其固定在某個位置，并且可以使用 transform 屬性對其旋轉(zhuǎn)或翻轉(zhuǎn)。

下面是一個使用 CSS 固定頂部和底部翻轉(zhuǎn)的簡單示例：

```html

<div class="parent">

<div class="child">Hello, World!</div>

</div>

```css

.parent {

position: relative;

width: 200px;

height: 100px;

.child {

position: absolute;

top: 50px;

left: 50px;

width: 100px;

height: 100px;

background-color: blue;

transform: rotateY(-45deg);

在這個示例中，`.parent` 元素被設置為相對定位，寬度為 200 像素，高度為 100 像素。`.child` 元素被設置為絕對定位，位于 `.parent` 元素頂部 50 像素處，寬度為 100 像素，高度為 100 像素，背景顏色為藍色，并使用旋轉(zhuǎn)Y 45 deg 的 transform 屬性將其翻轉(zhuǎn)。

通過使用 CSS 固定頂部和底部翻轉(zhuǎn)，可以輕松地將頁面上的元素固定在某個位置，并翻轉(zhuǎn)頁面底部和頂部的元素，從而優(yōu)化頁面的排版和視覺效果。