css3中的旋转筛子的制作二

等待的L先生

于 2020-12-05 14:10:19 发布

阅读量312

点赞数

分类专栏： # html+css 文章标签：骰子 css3 html 网页设计

本文链接：https://blog.csdn.net/weixin_42590083/article/details/110680334

版权

css3中的旋转筛子的制作二

前面已经说过了每面筛子的做法；然后，今天的就只需要把做好筛子拼成一个筛子，然后运用css3中的animation动画，使筛子旋转起来就可以了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css中的弹性盒移动筛子的制作二</title>
    <style>
        *{
    margin: 0;padding: 0;}
        body,html{
    height: 100%;}
        body{
    
            display: flex;
            justify-content: center;
             align-items: center;
            flex-wrap: wrap; 
        }
         @keyframes rotate {
    
  from {
    
    transform: rotateY(0deg) rotateX(0deg);
  }
  to {
    
    transform: rotateY(360deg) rotateX(360deg);
  }
}
        #seive{
     
             height:100px;
             width:100px;
             position: relative;
             left: 0;right: 0;top: 0;bottom: