能不能通过代码动态修改css
本帖最后由 515275362 于 2024-7-31 14:57 编辑我要在竖屏时，通过更改css使横屏页面旋转90度，但在横屏时不旋转。通过以下css旋转
<style>
.rotate-90 {
/* 旋转90度 */
transform: rotate(90deg);
/* 确保旋转中心为元素中心 */
transform-origin: center;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotate Screen Example</title>
<style>
.screen {
width: 300px;
height: 500px;
background-color: #1faef0;
margin: 0 auto;
position: relative;
transform-origin: center center;
/* 初始状态下屏幕是正常的 */
transform: rotate(0deg);
/* 过渡效果，使旋转看起来更平滑 */
transition: transform 0.5s ease-in-out;
}
.screen.rotated {
/* 旋转90度 */
transform: rotate(90deg);
}
</style>
</head>
<body>
<div class="screen"></div>
<button onclick="rotateScreen()">Rotate Screen</button>
<script>
function rotateScreen() {
var screen = document.querySelector('.screen');
screen.classList.toggle('rotated');
}
</script>
</body>
</html>
有点麻烦，你得判断当前屏幕大小，你自适应不行吗 :hjyzw:
页:
[1]