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: "^";
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 发布文章使用:只允许注册用户才可以访问!