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