Home > Article > Web Front-end > How is CSS 3D implemented to implement a rotating ball? (code example)
How is CSS 3D implemented to implement a rotating ball? (code example)
- 云罗郡主forward
- 2018-10-22 14:12:203690browse
The content of this article is about how to realize the rotating ball in CSS 3D? (Code case) has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
Without further ado, I will post the code directly for you. The specific code is as follows:
<!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>The above is the complete introduction, if you If you want to know more about CSS video tutorial, please pay attention to the PHP Chinese website.
The above is the detailed content of How is CSS 3D implemented to implement a rotating ball? (code example). For more information, please follow other related articles on the PHP Chinese website!