css3 units & 1 turn

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 发布文章使用：只允许注册用户才可以访问！

---