css3 units & 1 turn

One full circle is 1turn, 180deg === 0.5turn

degrees, gradians, radians, turns

角度，刻度，弧度，转

deg, grad, rad, turn



transform: rotate(45deg);

transform: rotate(3.1416rad);

transform: rotate(-50grad);

transform: rotate(1.75turn);

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types

https://developer.mozilla.org/en-US/docs/Web/CSS/angle

https://developer.mozilla.org/en-US/docs/Web/CSS/transform



.activated .card-header .card-header-right-text:nth-last-of-type(1)::after{

  position: absolute;

  top: 2px;

  right: -5px;

  display: block;

  content: "^";

  width: 1px;

  height: 100%;

  color: #ffffff;

  font-size: 23px;

  /* transform: rotate(0.5turn) translateX(-10px); */

  transform: rotate(180deg) translateX(-10px);

  -webkit-transform: rotate(180deg) translateX(-10px);

  -moz-transform: rotate(180deg) translateX(-10px);

  -ms-transform: rotate(180deg) translateX(-10px);

  -o-transform: rotate(180deg) translateX(-10px);

}

https://developer.mozilla.org/en-US/docs/Web/CSS/ratio

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient

demo

alipay cards

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

css3 units & 1 turn的更多相关文章

  1. CSS3 长度单位

    http://www.w3chtml.com/css3/units/length/vh.html https://www.html.cn/book/css/values/length/vh.htm . ...

  2. 你可能不知道的7个CSS单位

    如果你是一名前端开发工程师,一般px和em使用频率比较高.但是今天本文的重点是介绍一些我们使用很少.甚至么有听说的单位. 一.重温em <style type="text/css&qu ...

  3. Deep Learning in a Nutshell: History and Training

    Deep Learning in a Nutshell: History and Training This series of blog posts aims to provide an intui ...

  4. clean-css

    What is clean-css? Clean-css is a fast and efficient Node.js library for minifying CSS files. Accord ...

  5. [C2P2] Andrew Ng - Machine Learning

    ##Linear Regression with One Variable Linear regression predicts a real-valued output based on an in ...

  6. CSS3入门学习之属性大全手册

    CSS Level 2 经历了 9 年的时间(从 2002 年 8 月到 2011 年 6 月)才达到 Recommendation(推荐) 状态.主要的原因是被一些 secondary featur ...

  7. CSS3 em && rem 详细教程

    1 # mobile css & rem & em & px > 1 rem === 16px 任意浏览器的默认字体高都是 16px, 所有未经调整的浏览器都符合: 1e ...

  8. CSS3与页面布局学习总结（六）——CSS3新特性（阴影、动画、渐变、变形、伪元素等）

    CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...

  9. CSS3中惊艳的gradient

    以前曾经记录过linear-gradient(线性渐变)和 radial-gradient(径向渐变)的语法. 可以参考<CSS3中border-radius.box-shadow与gradie ...

随机推荐

  1. （008）每日SQL学习：Oracle Not Exists 及 Not In 使用

    今天遇到一个问题,not in 查询失效,我以为是穿越了,仔细查了点资料,原来理解有误! select value from temp_a a where a.id between 1 and 100 ...

  2. Centos GitLab 配置

    如果重启之后,gitlab-ctl restart报"runsv no running"错,先运行下面命令 systemctl start gitlab-runsvdir.serv ...

  3. Java泛型机制

    泛型程序设计 1.泛型程序设计的起源? 泛型是JDK1.5增加的新特性. 2.使用泛型的好处? 使用泛型机制编写的代码比那些杂乱使用Object变量,然后再进行强制类型转换的代码具有更好的安全性和可读 ...

  4. .Net 5 C# 泛型（Generics）

    这里有个目录 什么是泛型? 后记 什么是泛型? 我们试试实现这个需求,给一个对象,然后返回 另一个同样的对象,先不管这个实用性,我们实现看看 首先是int型 private int Get(int a ...

  5. SpringCloud-常用组件介绍

    SpringCloud-常用组件介绍 分布式系统开发用于分布式环境(多个服务器不在同一个机房,同一个业务服务在多台服务器运行) Spring Cloud 是基于Springboot的分布式云服务架构, ...

  6. 分布式缓存 — Docker

    Docker 是一个开源项目,它基于 Google 公司推出的 Go 语言实现. 项目后来加入了 Linux 基金会,遵从了 Apache 2.0 协议,项目代码在 GitHub 上进行维护. Doc ...

  7. 2020Nowcode多校 Round5 C. Easy

    C. Easy 构造两个序列分别要满足 \(\sum_{i=1}^{k} a_{i} = N\) \(\sum_{i=1}^{k} b_{i} = M\) 一种方案能贡献\(\prod_{i=1}^{ ...

  8. 2019HDU多校 Round10

    Solved:3 Rank:214 08 Coin 题意:n组硬币 每组有两个 分别有自己的价值 每组的第一个被拿了之后才能拿第二个 问拿1,2....2n个硬币的最大价值 题解:之前贪心带反悔的做法 ...

  9. P1714 切蛋糕 dp+单调队列

    题意: 题目描述 在幻想乡,琪露诺是以笨蛋闻名的冰之妖精. 某一天,琪露诺又在玩速冻青蛙,就是用冰把青蛙瞬间冻起来.但是这只青蛙比以往的要聪明许多,在琪露诺来之前就已经跑到了河的对岸.于是琪露诺决定到 ...

  10. ZYB loves Xor I HDU - 5269 字典树

    题意: T组样例,给你n个数.你要找出来这n个数中任意两个数的二进制位中  最低位不同  的位置(假设是k),然后让所有2^k加起来就是结果 什么意思? 例如4 和 2 4的二进制是(100),2的二 ...