下面是一个使用 positive 属性来旋转文本的示例:
“`html
<style>
.container {
position: relative;
width: 400px;
height: 200px;
.container .text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
.container .text:nth-child(1) {
transform: rotateY(45deg);
.container .text:nth-child(2) {
transform: rotateY(90deg);
.container .text:nth-child(3) {
transform: rotateY(135deg);
.container .text:nth-child(4) {
transform: rotateY(180deg);
.container .text:nth-child(5) {
transform: rotateY(225deg);
</style>
<div class=”container”>
<h1 class=”text”>第一行文本</h1>
<p class=”text”>第二行文本</p>
<h2 class=”text”>第三行文本</h2>
<p class=”text”>第四行文本</p>
</div>
在这个例子中,使用 CSS 的 `position: relative` 属性将容器定位到页面顶部,使用 `position: absolute` 属性将文本定位到容器内部,并使用 `top`、`left` 和 `width`、`height` 属性设置其位置和大小。然后,使用 `transform` 属性设置文本的旋转角度,从 0 度旋转到所需的角度,其中每个子元素都使用相同的旋转角度。
使用 positive 属性还可以使文本沿页面向上滚动,例如:
“`html
<style>
.container {
position: relative;
width: 400px;
height: 200px;
.container .text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f00;
transform: translateY(-50%) scale(0.8);
.container .text:nth-child(1) {
background-color: #00f;
.container .text:nth-child(2) {
background-color: #0ff;
.container .text:nth-child(3) {
background-color: #fff;
</style>
<div class=”container”>
<h1 class=”text”>第一行文本</h1>
<p class=”text”>第二行文本</p>
<h2 class=”text”>第三行文本</h2>
<p class=”text”>第四行文本</p>
</div>
在这个例子中,使用 CSS 的 `position: relative` 属性将容器定位到页面顶部,使用 `position: absolute` 属性将文本定位到容器内部,并使用 `top`、`left` 和 `width`、`height` 属性设置其位置和大小。然后,使用 `transform` 属性设置文本的滚动高度,使其沿着页面向上滚动。