【CSS3】transitions & transfroms

transform: skew について

by tea4two

HTML

<p>transform: skewX(-25deg) </p>
<div class="skewX"><p>A use has been found for everything but snoring.<br />
<span>- Mark Twain</span></p></div>
<p>transform: skewY(10deg) </p>
<div class="skewY"><p>Man is the only animal that blushes. Or needs to.<br />
<span>- Mark Twain</span></p></div>

CSS

body { 
	text-align: center;
}
div {
	width: 300px;
	margin: 20px auto 80px auto;
	padding: 10px;
	border: 1px green solid;
	background: yellowgreen;
}
.skewX:hover {
	-webkit-transform: skewX(-25deg);
    -moz-transform: skewX(-25deg);
}
.skewY:hover {
	-webkit-transform: skewY(10deg);
    -moz-transform: skewY(10deg);
}
span {
	text-align: right;
	font-style: italic;	
}