3d动画哦

最新推荐文章于 2024-11-12 22:56:44 发布

dongsj_999

最新推荐文章于 2024-11-12 22:56:44 发布

阅读量235

点赞数 8

文章标签： css css3 前端

本文链接：https://blog.csdn.net/dongsj_999/article/details/140040922

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>三维</title>
       <style type="text/css">
           body{
               perspective: 800px;
           }
           div{

               width: 300px;
               height: 300px;
           }
           .box1{
               margin: 100px auto;
               transform-style: preserve-3d;
               background-color: rgba(244,41,183,0.3);
               /* transform: rotateY(45deg); */
               animation: rotate 2s infinite linear;
           }
           .box2{
               background-color: aquamarine;
               transform:rotateX(45deg)
           }
           @keyframes rotate{
               from{
                   transform: rotateY(0);
               }
               to{
                   transform: rotateY(360deg);
               }
           }
       </style>
   </head>
   <body>
       <div class="box1">
           <div class="box2"></div>
       </div>