如何让横屏在颤动中只旋转一个选定的页面

要让横屏在颤动中只旋转一个选定的页面，你可以使用CSS和JavaScript来实现。以下是一个基本的实现方法：

基础概念

CSS3 Transform: 使用CSS3的transform属性可以实现元素的旋转。
JavaScript: 使用JavaScript来控制旋转动画和颤动效果。

实现步骤

HTML结构: 创建一个容器，里面包含需要旋转的页面。
CSS样式: 设置容器的样式，使其可以旋转。
JavaScript控制: 使用JavaScript来控制旋转动画和颤动效果。

示例代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotate Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="page">Page Content</div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
}

.container {
    perspective: 1000px;
    width: 300px;
    height: 400px;
    border: 1px solid #ccc;
}

.page {
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    transition: transform 0.5s ease-in-out;
}

JavaScript (script.js)

const container = document.querySelector('.container');
const page = document.querySelector('.page');

let angle = 0;
let isSpinning = false;

function startSpinning() {
    isSpinning = true;
    setInterval(() => {
        angle += 1;
        page.style.transform = `rotateY(${angle}deg)`;
    }, 10);
}

function stopSpinning() {
    isSpinning = false;
    clearInterval(intervalId);
}

container.addEventListener('mouseenter', startSpinning);
container.addEventListener('mouseleave', stopSpinning);