css实现三维立体图片盒子封面效果代码-html代码-BFW代码库

css实现三维立体图片盒子封面效果代码

代码语言：html

代码描述：css实现三维立体图片盒子封面效果代码，鼠标放上去有交互倾斜动画。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">


  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&amp;display=swap'>
  
<style>
* {
  box-sizing: border-box;
}

body {
  scroll-behavior: smooth;
  font: 300 100%/1.4 "Montserrat", sans-serif;
}

.section {
  background: #A6D1E6;
  color: #3D3C42;
  font-size: 1.2rem;
  padding: 2rem;
}
.section--light {
  background: #FEFBF6;
}
.section--dark {
  background: #3D3C42;
  color: #FEFBF6;
}
.section--color {
  background: #7F5283;
  color: #FEFBF6;
}
.section__grid {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  align-content: center;
}
.section__grid-item {
  width: 50%;
  flex: 1 0 50%;
  padding: 1rem;
  perspective: 1600px;
}

figure {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-30deg) translateX(-5%);
  transition: 1s ease;
  -webkit-animation: 1s ease 0s 1 initAnimation;
          animation: 1s ease 0s 1 initAnimation;
  overflow: visible;
}
figure::before {
  position: absolute;
  content: " ";
  background-color: currentcolor;
  right: 0;
  top: 3%;
  width: 4rem;
  height: 94%;
  transform: translateX(1.5rem) rotateY(90deg);
  background: linear-gradient(90deg, #fff 0%, #f9f9f9 5%, #fff 10%, #f9f9f9 15%, #fff 20%, #f9f9f9 25%, #fff 30%, #f9f9f9 35%, #fff 40%, #f9f9f9 45%, #fff 50%, #f9f9f9 55%, #fff 60%, #f9f9f9 65%, #fff 70%, #f9f9f9 75%, #fff 80%, #f9f9f9 85%, #fff 90%, #f9f9f9 95%, #fff 100%);
}
figure::after {
  position: absolute;
  top: 0;
  left: 0;
  content: " ";
  width: 100%;
  height: 100%;
  transform: translateZ(-2rem);
  background-color: currentcolor;
  box-shadow: -10px 0 50px 10px rgba(0, 0, 0, 0.45);
  border-radius: 0 10px 10px 0;
}
figure:hover {
  transform: rotateY(-20deg) translateX(-5%);
}
figure img {
  max-width: 100%;
  transform: translateZ(2rem);
  background-color: currentcolor;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.45);
  border-radius: 0 10px 10px 0;
}
figure figcaption {
  display: none;
}

a {
  color: inherit;
  display: inline-block;
  margin-top: 1rem;
}
.section__grid-item img{
    width: 100%;
}
h2 {
  font-size: 1.75rem;
  font-weight: 500;
  margin-bottom: 1rem;
  width: 100%;
}
</style>




</head>

<body  >
  <section class="section">
	<div class="section__grid">
		<div class="section__grid-item">
			<figure class="">
				<img src="//repo.bfw.wiki/bfwrepo/image/62de84ba13711.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_600,/quality,q_90" alt="A random image">
				<figcaption>
					A random picture of a thing
				</figcaption>
			</figure>
		</div>
		<div class="section__grid-item">
			<h2>
				Lorem ipsum
			</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.
			</p>
			<a class="btn" href="#">
				Read more
			</a>
		</div>
	</div>
.........完整代码请登录后点击上方下载按钮下载查看