下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家，也给大家做个参考。

<style>
* { 
  margin: 0; padding: 0; 
  Box-sizing: border-Box; 
}
html { height: 600px; min-height: 150%; }
body { 
  min-height: 100%;
  background: linear-gradient( hsl(80,51%,8%),#E0D7A3);
}
div {
  perspective: 1000px;
  width: 33%;
  margin: 0 auto;
  margin-top: 3rem;
}
figure { 
  margin: 0;
  width: 100%;
  height: 29.5vw;
  background: url("winter-hat.jpg");
	background-size: 100%; 
	transform-origin: center bottom;
	transform-style: preserve-3d;
	transition: 1s transform;
 }
figure figcaption { 
  width: 100%;
  background: linear-gradient(rgba(0,0.4),rgba(0,0.4)),url("winter-hat.jpg");
	background-size: 100%; height: 50px;
	background-repeat: no-repeat;
  background-position: bottom;
  color: #fff; 
	position: relative; top: 29.5vw;
	transform-origin: center top;
	transform: rotateX(-89.9deg);
	font-size: 1.2vw;
  font-family: Montserrat,Arial,sans-serif;
  text-align: center;
	line-height: 3;
}
figure:before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
	Box-shadow: 0 0 100px 50px rgba(0,0.1),inset 0 0 250px 250px rgba(0,0.1);
	transition: 1s;
	transform: rotateX(95deg) translateZ(-80px) scale(0.75);
	transform-origin: inherit;
}
div:hover figure { 
  transform: rotateX(75deg) translateZ(5vw); 
}
div:hover figure:before {
	Box-shadow: 0 0 25px 25px rgba(0,0.5),0.5);
	transform: rotateX(-5deg) translateZ(-80px) scale(1);
	}

@media screen and (max-width: 800px) {
  div { width: 50%; } 
  figure { height: 45vw; } 
  figure figcaption { 
    top: 45vw;
    font-size: 2vw;
  } 
}

@media screen and (max-width: 500px) {
  div { 
    width: 80%; 
    margin-top: 1rem; 
  } 
  figure { 
    height: 70vw;
  } 
  figure figcaption { 
    top: 70vw;
    font-size: 3vw;
  } 
}
</style>

以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。