Heim > Artikel > Web-Frontend > Wie wird CSS 3D implementiert, um eine rotierende Kugel zu implementieren? (Codebeispiel)

Wie wird CSS 3D implementiert, um eine rotierende Kugel zu implementieren? (Codebeispiel)

云罗郡主nach vorne: 2018-10-22 14:12:203691Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Frage, wie man eine rotierende Kugel in CSS 3D realisiert. (Code-Fall) hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Ohne weitere Umschweife werde ich den Code direkt für Sie veröffentlichen. Der spezifische Code lautet wie folgt:

<!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>

Das Obige ist die vollständige Einführung, wenn Wenn Sie mehr über CSS-Video-Tutorial erfahren möchten, achten Sie bitte auf die chinesische PHP-Website.

Das obige ist der detaillierte Inhalt vonWie wird CSS 3D implementiert, um eine rotierende Kugel zu implementieren? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie implementiert man Animationen mit CSS? Machen Sie eine Bestandsaufnahme dieser CSS-AnimationstechnologienNächster Artikel：Wie implementiert man Animationen mit CSS? Machen Sie eine Bestandsaufnahme dieser CSS-Animationstechnologien

In Verbindung stehende Artikel

Mehr sehen