cssSandpaper transform拉伸实例页面

展示

代码

CSS代码：

#o1 {
	position: absolute;
	top: 55px;
	left: 25px;
	border: solid 1px black;
	position: absolute;
	width: 400px;
	height: 100px;
	padding: 10px;
	-sand-transform: skew(45deg, 0deg);
	background-color: #ffffcc;
}
#o2 {
	position: absolute;
	top: 10em;
	left: 43em;
	background-color: red;
	width: 200px;
	height: 302px;
	padding: 20px;
	-sand-transform: skew(-17deg, 45deg) rotate(-125deg);
	background-image: gradient(linear, center top, center bottom, from(#ffffff), to(#ccccff));
}
.relative {
	position: relative;
	top: 100px;
	left: 100px;
}
.absolute {
	position: absolute;
	top: 30px;
	left: 22px;
}
.relative .absolute div {
	background-color: blue;
	color: white;
	font-weight: bold;
	-sand-transform: rotate(30deg) skew(20deg, 20deg);
	width: 200px;
	height: 200px;
	position: relative;
	left: 500px;
	padding: 10px;
}
#matrixTest { 
	padding: 10px;
	position: relative;
	width: 400px;
	height: 200px;
	border: solid 5px red;
	left: 0px;
	top: 200px;
	background: #f0f3f9;
	-sand-transform: matrix(-1, 0 , 0, 1, 0, 0);
}
            

HTML代码：

<div id="o1">-sand-transform: skew( 45deg, 0deg);</div>
<div id="o2">-sand-transform: skew( -17deg, 45deg) rotate(-125deg);</div>
<div class="relative">
    <div class="absolute">
        <div>这是一个在相对定位容器中的绝对定位元素。<br /><br />
        -sand-transform: rotate(30deg) skew(20deg);
        </div>
    </div>
</div>
<div id="matrixTest">
    这里使用的是矩阵函数： <br />
    -sand-transform: matrix(-1, 0 , 0, 1, 0, 0);
</div>         
            

JS代码：

<script type="text/javascript" src="../js/cssQuery-p.js"></script>
<script type="text/javascript" src="../js/sylvester.js"></script>
<script type="text/javascript" src="../js/cssSandpaper.js"></script>