<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        html {

            /*750px*/

            font-size: 13.333333333333333vw;

        }

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        .wrap {

            width: 7.5rem;

            position: relative;

        }

        .w {

            position: absolute;

            top: 1rem;

            left: 1.45rem;

            width: 4.6rem;

            height: 4.6rem;

            animation: xzh infinite 15s linear;

        }

        .w span {

            position: absolute;

            display: inline-block;

            border: 1px solid red;

            font-size: .4rem;

            width: .6rem;

            height: .6rem;

            text-align: center;

        }

        @keyframes xzh {

            0% {

                transform: rotate(0deg);

            }

            50% {

                transform: rotate(180deg);

            }

            100% {

                transform: rotate(360deg);

            }

        }

    </style>

</head>

<body>

    <div class="wrap">

        <div class="w">

            <span>乾</span>

            <span>坤</span>

            <span>震</span>

            <span>巽</span>

            <span>坎</span>

            <span>离</span>

            <span>艮</span>

            <span>兑</span>

        </div>

    </div>

</body>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

<script>

    for (var i = 0; i < 8; i++) {

        var deg = i * 45;

        var wz = ($('.w').outerWidth() - $('.w span').outerWidth()) / 200;

        var x = (Math.sin(deg * Math.PI / 180) + 1) * wz;

        var y = (Math.cos(deg * Math.PI / 180) + 1) * wz;

        $('.w span').eq(i).css({

            transform: 'rotate(' + i * 45 + 'deg)',

            top: x + 'rem',

            left: y + 'rem'

        });

    }

</script>

</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. 成都信息工程大学第八届校赛 H J 题解

    H. Bang Bang Keli Ba 题目大意 给定数组 \(a\) ,构造递增序列 \(b\) 和递减序列 \(c\) 且 \(a_i=b_i+c_i\) . 题解 下面证明解的存在性,存在性证 ...

  2. VMware Workstation Ubuntu 20.04 LTS无法连接网络问题

    本文记录了自己使用的安装在VMware Workstation上的Ubuntu20.04无法连接到网络的解决过程--终于解决困扰我两个小时的问题 出现问题# 毫无征兆,平时使用正常的Ubuntu在今天 ...

  3. vue+vant-ui小程序，微信小程序自定义导航栏（适配刘海屏）

    整理一下微信小程序自定义导航栏和刘海屏适配问题 1.首先在根据官方文档,我们在小程序修改 app.json 中的 window 的属性 "navigationStyle": &qu ...

  4. Timer VS DispatcherTimer

    Timer是在ThreadPool线程池中执行的,每当计时器到期时,就会创建一个线程来执行事件处理程序.这种实现方式可能会导致一些问题,例如计时器事件处理程序可能会与主线程竞争资源,从而导致性能问题. ...

  5. 树莓派zero W ，连接墨水屏（2.13inch_e-Paper_HAT (V3)）

    墨水瓶型号:    2.13inch_e-Paper_HAT (V3) https://www.waveshare.net/wiki/2.13inch_e-Paper_HAT 与树莓派 Zero 连接 ...

  6. 从main_phase跳回reset_phase的方式

    在main_phase中调用: phase.jump(uvm_reset_phase::get()); 注意需要防止进入死循环.

  7. 阿里云IPSec的一些问题

    1.阿里云IPSec无法进行多段连接单个IPSec连接 解决方案  在阿里云端需要如下操作 1.单个VPN网关下创建多个IPSec连接  连接属性一致  使用兴趣流模式.打开nat转换.  2段对2段 ...

  8. ts（typescript）讲解for , for...in..., for...of..., while, every, some, map, filter

    for  一般用于已知循环次数 var num:number = 5; var i:number; var factorial = 1; for(i = num;i>=1;i--) { fact ...

  9. 生成19位long型唯一数字id

    /** * 生成19位long型唯一数字id * @return */ public static long GetLong19UUID() { // String nanoRandom = Syst ...

  10. go-浅学设计模式随记

    责任链模式 组成:由多个处理器及处理器处理标志串联组成 作用:常用于处理流水线事务,利用多个处理器对同一个对象进行处理,可以利用各处理器开关 场景:常见逻辑层处理逻辑:获取参数.fetch数据.逻辑处 ...