Skip to content

Instantly share code, notes, and snippets.

/dabblet.css

Created June 24, 2013 11:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/5849345 to your computer and use it in GitHub Desktop.
Save anonymous/5849345 to your computer and use it in GitHub Desktop.
Download ZIP
Matrix 3d transform for obtaining trapezoid? (SO)
Raw
dabblet.css
/**
* Matrix 3d transform for obtaining trapezoid? (SO)
* http://stackoverflow.com/q/14480341/1397351
*/
* {
transform-style: preserve-3d;
}
.subject {
width: 100%;
height: 100%;
position: relative;
left: 0px;
top: 0;
margin-top: 0px;
}
.whatBox {
width: 340px;
height: 450px;
position: relative;
top: 30px;
left: 0;
margin: 0 auto;
background: #eee;
perspective: 1000px;
}
.what {
width: 100%;
height: 100%;
position: relative;
top: 0px;
transform-origin: 0% 0%;
transform: rotateX(98deg)
scaleY(.9)
translateZ(0px) translateX(0px)
translateY(0px) skewx(0deg);
}
.img {
width: 100%;
height: 100%;
transform: scaleY(-1);
}
.img, .subject {
background: url('http://hdnaturepictures.com/wp-content/uploads/2013/05/Paradise-Place-Wallpaper.jpg');
}
.target { mask: url(#m12); }
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<svg height="0">
<mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
<stop stop-color="white" offset="0"/>
<stop stop-color="white" stop-opacity="0" offset="1"/>
</linearGradient>
<!--<circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>-->
<rect x="0" y="0" width="1" height="1" fill="url(#g)"/>
<rect x="0" y="0" width="1" height="1" fill="url(#g)"/>
</mask>
</svg>
<div class="whatBox">
<div class="subject"></div>
<div class="what target"><div class="img"></div></div>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment