<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Ceiling Fan</title>
<style>
body {
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.fan-container {
width: 200px;
height: 200px;
position: relative;
perspective: 800px; /* Creates 3D perspective */
}
.fan {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d; /* Preserves 3D transformations */
animation: rotate 5s linear infinite; /* Animates the rotation */
}
.blade {
position: absolute;
left: 50%;
top: 50%;
transform-origin: 50% 0%; /* Sets rotation origin to top center */
background-color: #757083; /* Blade color */
opacity: 0.8;
标签:center,color,50%,转动,height,position,吊扇,css
From: https://www.cnblogs.com/ai888/p/18596628