css3 旋转 八仙桌
<!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 旋转 八仙桌的更多相关文章
- css3旋转倾斜3d小动画
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- css3旋转小三角
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 可控制转速CSS3旋转风车特效
以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...
- CSS3 旋转 太阳系
参考https://www.tadywalsh.com/web/cascading-solar-system/ 首先 旋转有两种方式 一种是使用 transform-origin 另一种是tran ...
- css3旋转
首先创建一个容器如div,然后设置其相关的3d属性,主要是三个1.perspective 透视,值越小3D感越强,值越大视觉正常.2.perspective-origin,透视点一般居于容器的中心.3 ...
- CSS3 旋转代码备忘
.Aclose { -webkit-transition-property: all; -webkit-transition-duration: .3s; -moz-transition-proper ...
- CSS3旋转缩放移动倾斜等效果——transform
1.transform浏览器支持情况 也就是说目前不考虑老浏览器的话是不用加前缀的,感谢菜鸟教程:https://www.runoob.com/cssref/css3-pr-transform.htm ...
- css3旋转、过渡、动画属性
1.transform 该属性对元素进行旋转.缩放.移动和倾斜 translate元素从当前位置移动 rotate元素顺时针旋转 scale元素的尺寸增大或减小 skew元素翻转 2.transiti ...
- css3旋转立方体-_-
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- CSS3 旋转的八卦图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- win10 + emacs + sml
1.官网下载sml编译器是smi安装包,安装结束之后把bin文件夹放到环境变量Path中 2.下载emacs压缩包,直接解压 3.emacs中alt+x,输入package-list 然后选择sml- ...
- 虚拟机搭建linux环境&&使用winscp连接搭建好的linux环境步骤
一.需要的工具 虚拟机应用程序.一个镜像(ubuntu等).winscp可执行程序 二.安装虚拟机以及插入镜像 1)选择虚拟机 我安装的是VMware 就是这个,因为之前用的都是vitualbox现在 ...
- uni-app学习笔记之----目录认识
新建了一个项目之后,先简单认识目录结构 1.pages 存放项目的所有页面 2.static 存放静态资源 3.unpackage 存放项目打包之后生成的文件 4.App.vue 项目的根组 ...
- 用swift开发framework时采用OC混编的解决方案
随着swift ABI的稳定,越来越多的开发者开始使用swift语言开发项目,但是由于大部分工具库也还是使用OC写的,因此我们不得不需要在项目中采用swift与oc混编. 在开发app项目时,swif ...
- 成品直播源码，Flutter 夜间模式 全局字体
成品直播源码,Flutter 夜间模式 全局字体 import 'package:flutter/material.dart';import 'package:flutter_widget/route ...
- Day25:报告编写等
今天完成的任务: 1.完成全部结论的编写,完成一部分界面测试的撰写. 2.完成moodle配置 明日计划: 1.完成前端的原型介绍 2.完善前端设计与实现报告 每日小结: 今天完成了最后一次的答辩, ...
- env_config
import sys import os root_path = os.path.abspath(os.path.dirname(os.path.dirname(os.path.dirname(__f ...
- Linux_CMD_FOR_OS_INFO
1,系统版本 : lsb_release -a 2,系统信息(86/64): uname -a 3,键盘信息:localectl status 4,系统支持的键盘:localectl list-ke ...
- webpack的核心概念
一.entry 指定webpack从哪个文件开始入手打包,下面是单入口 多页面开发,每个页面都有自己的js文件,多个文件,所以需要多个入口 我们看看多入口,单出口bundle.js,我们在src仅仅多 ...
- MyBatis_07(动态SQL)
动态SQL: Mybatis框架的动态SQL技术是一种根据特定条件动态拼装SQL语句的功能, 它存在的意义是:"为了解决拼接SQL语句字符串时的痛点问题". 一.If if标签可通 ...