Le contenu de cet article explique comment réaliser la boule rotative en CSS 3D ? (Code case) a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère que cela vous sera utile.
Sans plus tarder, je publierai le code directement pour vous. Le code spécifique est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>zimv-css 3d ball</title>
</head>
<style>
body{
padding: 100px 0 0 150px;
}
</style>
<body>
<p class="wrapper">
<p class="box" id="circles">
</p>
</p>
<style>
.wrapper{
animation: rotate 3s infinite linear alternate;
transform-style: preserve-3d;
width: 100px;
height: 100px;
margin:150px 0 0 150px;
}
.box{
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(45deg);
}
.circle{
border-radius: 50%;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
border: 1px solid red;
}
@keyframes rotate {
0% {
transform: rotateZ(0deg);
}
50%{
transform: rotateZ(360deg);
}
100% {
transform: rotateZ(360deg) rotateX(180deg);
}
}
</style>
<script>
let cir = document.getElementById('circles');
for(let i=0;i<180;i++){
let p = document.createElement('p');
p.style = `transform: rotateX(${i}deg);border: 1px solid rgba(200,200,200,1)`;
p.className = 'circle';
cir.appendChild(p);
}
</script>
</body>
</html>Ce qui précède est l'introduction complète. Si vous souhaitez en savoir plus sur le Tutoriel vidéo CSS, veuillez faire attention au site Web PHP chinois.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
