1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.         html {
  11.             /*750px*/
  12.             font-size: 13.333333333333333vw;
  13.         }
  14.  
  15.         * {
  16.             margin: 0;
  17.             padding: 0;
  18.             box-sizing: border-box;
  19.         }
  20.  
  21.         .wrap {
  22.             width: 7.5rem;
  23.             position: relative;
  24.         }
  25.  
  26.         .w {
  27.             position: absolute;
  28.             top: 1rem;
  29.             left: 1.45rem;
  30.             width: 4.6rem;
  31.             height: 4.6rem;
  32.             animation: xzh infinite 15s linear;
  33.         }
  34.  
  35.         .w span {
  36.             position: absolute;
  37.             display: inline-block;
  38.             border: 1px solid red;
  39.             font-size: .4rem;
  40.             width: .6rem;
  41.             height: .6rem;
  42.             text-align: center;
  43.         }
  44.  
  45.         @keyframes xzh {
  46.             0% {
  47.                 transform: rotate(0deg);
  48.             }
  49.  
  50.             50% {
  51.                 transform: rotate(180deg);
  52.             }
  53.  
  54.             100% {
  55.                 transform: rotate(360deg);
  56.             }
  57.         }
  58.     </style>
  59. </head>
  60.  
  61. <body>
  62.     <div class="wrap">
  63.         <div class="w">
  64.             <span>乾</span>
  65.             <span>坤</span>
  66.             <span>震</span>
  67.             <span>巽</span>
  68.             <span>坎</span>
  69.             <span>离</span>
  70.             <span>艮</span>
  71.             <span>兑</span>
  72.         </div>
  73.     </div>
  74. </body>
  75. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  76. <script>
  77.     for (var i = 0; i < 8; i++) {
  78.         var deg = i * 45;
  79.         var wz = ($('.w').outerWidth() - $('.w span').outerWidth()) / 200;
  80.         var x = (Math.sin(deg * Math.PI / 180) + 1) * wz;
  81.         var y = (Math.cos(deg * Math.PI / 180) + 1) * wz;
  82.  
  83.         $('.w span').eq(i).css({
  84.             transform: 'rotate(' + i * 45 + 'deg)',
  85.             top: x + 'rem',
  86.             left: y + 'rem'
  87.         });
  88.     }
  89. </script>
  90.  
  91. </html>

　　主要是sin和cos设置

css3 旋转 八仙桌的更多相关文章

  1. css3旋转倾斜3d小动画

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. css3旋转小三角

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 可控制转速CSS3旋转风车特效

    以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...

  4. CSS3 旋转 太阳系

    参考https://www.tadywalsh.com/web/cascading-solar-system/ 首先 旋转有两种方式  一种是使用 transform-origin  另一种是tran ...

  5. css3旋转

    首先创建一个容器如div,然后设置其相关的3d属性,主要是三个1.perspective 透视,值越小3D感越强,值越大视觉正常.2.perspective-origin,透视点一般居于容器的中心.3 ...

  6. CSS3 旋转代码备忘

    .Aclose { -webkit-transition-property: all; -webkit-transition-duration: .3s; -moz-transition-proper ...

  7. CSS3旋转缩放移动倾斜等效果——transform

    1.transform浏览器支持情况 也就是说目前不考虑老浏览器的话是不用加前缀的,感谢菜鸟教程:https://www.runoob.com/cssref/css3-pr-transform.htm ...

  8. css3旋转、过渡、动画属性

    1.transform 该属性对元素进行旋转.缩放.移动和倾斜 translate元素从当前位置移动 rotate元素顺时针旋转 scale元素的尺寸增大或减小 skew元素翻转 2.transiti ...

  9. css3旋转立方体-_-

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  10. CSS3 旋转的八卦图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 【DM论文阅读杂记】复杂社区网络

    Paper Title Community Structure in Time-Dependent, Multiscale, and Multiplex Networks Basic algorith ...

  2. firefox 利用 Selenium IDE 对 DBackup 进行自动化测试

    今天看<编写可维护的JavaScript>的时候有一章是专门讲 Selenium 对 JavaScript 进行自动化测试的. 在了解了 Selenium 的强大之后,动手试验了一下 fi ...

  3. Linux 第十节( APACHE )

    Apache   基金会,软件 http 协议 httpd  软件包 vim /etc/httpd/conf/httpd.conf   //网站配置主文件 systemctl restart http ...

  4. （0409） Pycharm 的设置--参数设置（运行.py文件带参数，例如argument） 比如： demo.py -prj xxx

    1)  https://www.cnblogs.com/yksgzlyh/p/10221960.html 点击"Run"菜单下的"Edit Configurations. ...

  5. moment 时区问题

        moment.parseZone('2023-01-11T16:54:31.6864601').utc().format('YYYY-MM-DD HH:mm:ss')   文档 | Momen ...

  6. python桌面应用自动化，uiautomation模块的Depth和searchDepth心得

    最近在学习yinkaisheng大神写的uiautomation模块,Depth和searchDepth一直使用不好,明明Depth=3,居然可以用searchDepth=1找到,网上也没找到答案,就 ...

  7. linux环境下mariadb10.5.16的数据存储目录修改

    mysql或mariadb的数据,一般默认存在/var/lib/mysql目录下,本文介绍把mariadb数据存到容量较大的目录中,如/home 操作步骤: 1.将/var/lib/mysql的数据复 ...

  8. 虚拟内存跟物理内存之间的映射mmap\munmap

    #include <stdio.h> #include <sys/mman.h> int main(void) { /* * 创建虚拟内存的映射 * void *mmap (v ...

  9. 关于右值 std::move

    今天发现一个情况,对容器map 进行 std::move 之后,原map被清空了.     map<int, int> tmp;     tmp[1] = 1;     tmp[2] = ...

  10. 本地搭建JupyterNotebook开发环境

    背景 Jupyter 是一款优秀的编程语言运行环境包括Hub.Lab.Notebook等优秀自项目,JupyterNotebook是衍生的在线交互运行平台的前端项目 环境 Windows 11 Nod ...