本篇文章给大家带来的内容是关于CSS 3D实现旋转球是如何实现的?(代码案例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

CSS 3D实现旋转球是如何实现的?(代码案例)

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!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>
标签
DT素材网

DT素材网

149

0

0

( 此人很懒并没有留下什么~~ )