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;
}