skew width_css3skew

代码：

Title

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select,figure,figcaption{margin:0;padding:0}

body{font:14px"微软雅黑","Arial Narrow",HELVETICA;}

figure{

float: left;

width: 33%;

overflow: hidden;

position: relative;

background: #2f0000;

}

figure img{

height: 400px;

opacity: 0.9;

transition: all 0.35s;

}

figcaption{

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

}

figcaption h3{

color: #ffffff;

margin: 10% 0 0 12%;

transition: all 1s;

transform: skew(90deg);

}

figcaption p{

background:#ffffff;

color: #000000;

margin:15px;

font-size: 13px;

text-align: center;

width: 130px;

height: 20px;

line-height: 20px;

transition: all 1s;

transform: skew(90deg);

}

figure:hover figcaption h3{

transform: skew(0deg);

}

figure:hover figcaption p{

transform: skew(0deg);

}

标题标题

文字文字文字文字

标题标题

文字文字文字文字