Maison > Article > interface Web > Comment CSS 3D est-il implémenté pour implémenter une boule rotative ? (exemple de code)

Comment CSS 3D est-il implémenté pour implémenter une boule rotative ? (exemple de code)

云罗郡主avant: 2018-10-22 14:12:203749parcourir

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(&#39;circles&#39;);
	for(let i=0;i<180;i++){
		let p = document.createElement(&#39;p&#39;);
		p.style = `transform: rotateX(${i}deg);border: 1px solid rgba(200,200,200,1)`;
		p.className = &#39;circle&#39;;
		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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment implémenter une animation en utilisant CSS ? Faites le point sur ces technologies d'animation CSSArticle suivant：Comment implémenter une animation en utilisant CSS ? Faites le point sur ces technologies d'animation CSS

Articles Liés

Voir plus