页面index.html
<!DOCTYPE html>
<html>
<head>
<title>3D Hover Effect of Images</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- Container -->
<div class="thumb">
<!-- Image -->
<a href="#">
<!-- Label -->
<span></span>
</a>
</div>
</body>
</html>样式style.css
/*custom font - Montserrat*/
@import url(https://fonts.googleapis.com/css?family=Montserrat);
/*basic reset*/
* {margin: 0; padding: 0;}
/*forcing the body to take 100% height*/
html, body {min-height: 100%;}
/*a nice BG*/
body {
background: #544; /*fallback*/
background: linear-gradient(#544, #565);
}
/*Thumbnail Background*/
.thumb {
width: 400px; height: 300px; margin: 70px auto;
perspective: 1000px;
}
.thumb a {
display: block; width: 100%; height: 100%;
background: url(""http://thecodeplayer.com/u/m/i1.png"");
/*3d space for children*/
transform-style: preserve-3d;
/*simulating hover effect*/
transform: rotateX(80deg); transform-origin: bottom;
}
/*bottom surface */
.thumb a:after {
/*36px high element positioned at the bottom of the image*/
content: ''; position: absolute; left: 0; bottom: 0;
width: 100%; height: 36px;
/**/
}.thumb a:after设置来position: absolute，那么它是相对应哪个元素定位？按照absolute的定义来说是相对于 static 定位以外的第一个父元素进行定位，实测是相对于a元素(或者.thumb)定位，但是这里a元素和.thumb元素不是默认的position:static吗？
absolute会紧跟在一个block元素之后！所以会跟在你遍历block的a标签之后！
absolute看父元素以上的元素有没有使用定位，如果没有，就以文档(还是窗口？)定位
给a一个potision
只有 relative absolute fixed sticky 才被视之为 positioned（有定位的），偏偏 static 作为 position 的初始值就是 non-positioned（无定位的），static 的时候，元素遵循文档对象的正常流行为，一切定位相关的属性，如 top right bottom left z-index 等都无效，当然也不能作为 relative absolute fixed sticky 的参照物。