css3transform rotate,CSS3 transform:rotate 倾斜的标题

CSS

语言：

CSSSCSS

确定

@-webkit-keyframes angleIn {

0% {

-webkit-transform: translate3d(-200vw, -100vh, 0) rotate(12deg) scale(1.1);

opacity: 0;

}

100% {

-webkit-transform: translate3d(0, 0, 0) rotate(12deg) scale(1.1);

opacity: 1;

}

}

@-moz-keyframes angleIn {

0% {

-moz-transform: translate3d(-200vw, -100vh, 0) rotate(12deg) scale(1.1);

opacity: 0;

}

100% {

-moz-transform: translate3d(0, 0, 0) rotate(12deg) scale(1.1);

opacity: 1;

}

}

@keyframes angleIn {

0% {

-webkit-transform: translate3d(-200vw, -100vh, 0) rotate(12deg) scale(1.1);

-moz-transform: translate3d(-200vw, -100vh, 0) rotate(12deg) scale(1.1);

-ms-transform: translate3d(-200vw, -100vh, 0) rotate(12deg) scale(1.1);

-o-transform: translate3d(-200vw, -100vh, 0) rotate(12deg) scale(1.1);

transform: translate3d(-200vw, -100vh, 0) rotate(12deg) scale(1.1);

opacity: 0;

}

100% {

-webkit-transform: translate3d(0, 0, 0) rotate(12deg) scale(1.1);

-moz-transform: translate3d(0, 0, 0) rotate(12deg) scale(1.1);

-ms-transform: translate3d(0, 0, 0) rotate(12deg) scale(1.1);

-o-transform: translate3d(0, 0, 0) rotate(12deg) scale(1.1);

transform: translate3d(0, 0, 0) rotate(12deg) scale(1.1);

opacity: 1;

}

}

@-webkit-keyframes fadeIn {

0% {

opacity: 0;

}

100% {

opacity: 1;

}

}

@-moz-keyframes fadeIn {

0% {

opacity: 0;

}

100% {

opacity: 1;

}

}

@keyframes fadeIn {

0% {

opacity: 0;

}

100% {

opacity: 1;

}

}

html {

height: 100%;

}

body {

background: #555;

font-family: 'Oswald', sans-serif;

height: 100%;

overflow: hidden;

}

.page {

width: 100%;

margin: 0 auto;

padding: 40px 0;

}

.rotator {

-webkit-transform: translate3d(-200vw, -120vh, 0) rotate(12deg);

-moz-transform: translate3d(-200vw, -120vh, 0) rotate(12deg);

-ms-transform: translate3d(-200vw, -120vh, 0) rotate(12deg);

-o-transform: translate3d(-200vw, -120vh, 0) rotate(12deg);

transform: translate3d(-200vw, -120vh, 0) rotate(12deg);

width: 110vw;

}

.rotate-1 {

-webkit-animation: angleIn 0.5s linear;

-moz-animation: angleIn 0.5s linear;

animation: angleIn 0.5s linear;

-webkit-animation-fill-mode: forwards;

-moz-animation-fill-mode: forwards;

animation-fill-mode: forwards;

}

.rotate-2 {

-webkit-animation: angleIn 0.5s linear 0.3s;

-moz-animation: angleIn 0.5s linear 0.3s;

animation: angleIn 0.5s linear 0.3s;

-webkit-animation-fill-mode: forwards;

-moz-animation-fill-mode: forwards;

animation-fill-mode: forwards;

}

.rotate-fixed {

-webkit-transform: rotate(12deg);

-moz-transform: rotate(12deg);

-ms-transform: rotate(12deg);

-o-transform: rotate(12deg);

transform: rotate(12deg);

width: 110vw;

}

h1 {

-webkit-transform: skew(12deg);

-moz-transform: skew(12deg);

-ms-transform: skew(12deg);

-o-transform: skew(12deg);

transform: skew(12deg);

padding: 10px 20vw 10px 0;

font-weight: 700;

text-transform: uppercase;

font-size: 3rem;

background: #477eeb;

text-align: right;

}

h2 {

-webkit-transform: skew(12deg);

-moz-transform: skew(12deg);

-ms-transform: skew(12deg);

-o-transform: skew(12deg);

transform: skew(12deg);

background: black;

color: white;

text-align: right;

font-weight: 300;

padding: 10px 21vw 10px 0;

margin-top: -30px;

}

span.pop-in {

-webkit-transform: skew(12deg);

-moz-transform: skew(12deg);

-ms-transform: skew(12deg);

-o-transform: skew(12deg);

transform: skew(12deg);

-webkit-animation: fadeIn 0.3s linear 0.8s;

-moz-animation: fadeIn 0.3s linear 0.8s;

animation: fadeIn 0.3s linear 0.8s;

-webkit-animation-fill-mode: forwards;

-moz-animation-fill-mode: forwards;

animation-fill-mode: forwards;

opacity: 0;

display: block;

color: rgba(255, 255, 255, 0.6);

padding: 10px 17vw 0 0;

margin-bottom: -20px;

font-size: 2rem;

text-align: right;

}