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. redis 主从复制 和集群

    redis集群最少三个节点 之间相互通信ping-pong 投票选举机制 主从复制 的话 最少六个节点 ,主三从三

  2. Linux监控内核SNMP计数器

    nstat命令和rtacct命令是一个简单的监视内核的SNMP计数器和网络接口状态的实用工具. 语法 nstat/rtacct (选项) 选项 -h:显示帮助信息: -V:显示指令版本信息: -z:显 ...

  3. springboot配置rabbitmq

    一.消息生成者 1.1消息生成者配置 1.2 消息发送端代码 1.3 创建交换机,队列,并建立关系 二.消费者 2.1消费者 三.限流配置 3.1配置文件 #在单个请求中处理的消息个数,他应该大于等于 ...

  4. Java8中流的性能

    流(Stream)是Java8为了实现最佳性能而引入的一个全新的概念.在过去的几年中,随着硬件的持续发展,编程方式已经发生了巨大的改变,程序的性能也随着并行处理.实时.云和其他一些编程方法的出现而得到 ...

  5. Java获取类路径的方式

    Java环境中,如何获取当前类的路径.如何获取项目根路径等: @Test public void showURL() throws IOException { // 第一种:获取类加载的根路径 Fil ...

  6. Poem 01（转）

    Dear Sunshine The way you glow through my blinds in the morning. It makes me feel like you missed me ...

  7. spark SQL （一）初识 ，简介

    一, 简介 Spark SQL是用于结构化数据处理的Spark模块.与基本的Spark RDD API不同,Spark SQL提供的接口为Spark提供了关于数据结构和正在执行的计算的更多信息.在内部 ...

  8. 通过spring statemmachine 自定义构建属于自己的状态机（两种方式）

    spring 的stateMachine 相对于当前的版本,还是比较新颖的,但是对于合适的业务场景,使用起来还是十分的方便的.但是对于官网提供的文档,讲解的是十分的精简,要想更深入的了解其内部架构,只 ...

  9. （6）dd命令安装Linux

    1.面对大批量服务器的安装,人们往往热衷于选择"无人值守安装"的方式,而此方式需要对服务器进行过多的配置,并不适合初学者. 无人值守安装(Kickstart),又称全自动安装,其工 ...

  10. 什么？还不懂c++vector的用法，你凭什么勇气来的！