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. protoc-gen-validate (PGV)

    https://github.com/envoyproxy/protoc-gen-validate This project is currently in alpha. The API should ...

  2. 13 | 实战：单机如何实现管理百万主机的心跳服务？ https://time.geekbang.org/column/article/240656

    13 | 实战:单机如何实现管理百万主机的心跳服务? https://time.geekbang.org/column/article/240656

  3.  Go is more about software engineering than programming language research.

    https://talks.golang.org/2012/splash.article Go at Google: Language Design in the Service of Softwar ...

  4. 强制杀死进程后，进程相关的socket未必发送RST

    强制杀死进程后,进程相关的socket未必发送RST

  5. 6到8个月如何达到三年加得前端经验，对标P7，“慕课网 Java工程师2020”

    百度网盘链接:https://pan.baidu.com/s/1xshLRO3ru0LAsQQ0pE67Qg 提取码:bh9f   阶段一:课程设计及前端创建脚手架开发 第1周   需求分析和架构设计 ...

  6. Python学习【第2篇】：基本数据类型(详解）

    1.数字 2.字符串中的方法 str test = "xiaoxing"#首字母大写v = test.capitalize()print(v)运行后结果如下Xiaoxing tes ...

  7. 洛谷P2145

    Description 给定一串数字,每个数字代表一种颜色 你可以向这个数字序列里加任意数字,每加一个视为一次操作 当你加入的数字和与它相连的同种数字不少于三个时,他们就会消除 消除后序列的两端自动靠 ...

  8. bzoj2654(loj20069)

    2654: tree Time Limit: 30 Sec  Memory Limit: 512 MB Description 给你一个无向带权连通图,每条边是黑色或白色.让你求一棵最小权的恰好有ne ...

  9. （八）整合 Dubbo框架 ,实现RPC服务远程调用

    整合 Dubbo框架 ,实现RPC服务远程调用 1.Dubbo框架简介 1.1 框架依赖 1.2 核心角色说明 2.SpringBoot整合Dubbo 2.1 核心依赖 2.2 项目结构说明 2.3 ...

  10. linux（2）系统目录结构

    前言 平常linux系统用的也不少,那么linux下的每个目录都是用来干什么的,小伙伴们有仔细研究过吗?让我们来了解下吧 Linux 系统目录结构 登录系统后,在当前命令窗口下输入命令: [root@ ...