html制作花样链接卡页面_HTML5 3D 信用卡信息录入界面

CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

}

ul {

margin: 0;

padding: 0;

list-style: none;

}

li {

margin: 0;

padding: 0;

}

html,

body {

height: 100%;

}

body {

background: linear-gradient(to bottom, #fff 0%, #f7f6f5 100%);

}

.card-form {

position: relative;

top: 30%;

-webkit-transform: perspective(1000px) translate3d(0, 0, 0) rotateX(0);

-moz-transform: perspective(1000px) translate3d(0, 0, 0) rotateX(0);

-ms-transform: perspective(1000px) translate3d(0, 0, 0) rotateX(0);

-o-transform: perspective(1000px) translate3d(0, 0, 0) rotateX(0);

transform: perspective(1000px) translate3d(0, 0, 0) rotateX(0);

max-width: 600px;

height: auto;

margin: 0 auto;

background-image: linear-gradient(-180deg, #fafafa 0%, #f2f2f2 100%);

border: 1px solid #d8d8d8;

box-shadow: 0px 0 0 0px rgba(0, 0, 0, 0.1);

border-radius: 8px;

-webkit-animation: rotate-form 1200ms 1000ms 1 forwards cubic-bezier(0.44, 0.22, 0, 1);

-moz-animation: rotate-form 1200ms 1000ms 1 forwards cubic-bezier(0.44, 0.22, 0, 1);

}

.card-form__inner {

padding: 24px;

font-size: 0;

}

.card-form__element {

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-ms-transform: translat