当点击图片时,通过平移旋转出现图片解释性文字,该图片文字部分时随意编写的
1、html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href='https://cdn.bootcdn.net/ajax/libs/minireset.css/0.0.2/minireset.css' rel='stylesheet'>
<link rel="stylesheet" href="2.css">
</head>
<body>
<article>
<section>
<div class="description">不知道该说什么,也许什么都不说就刚刚好</div><!--解释性文字-->
<div class="preview"><img src="1.jpg" alt=""></div><!--图片部分我是随便找的400px*400px图片-->
</section>
</article>
</body>
</html>在这里插入代码片
2、css部分
我是用less进行编写,更快捷哦
```javascript
body{
height:100vh;
width:100vw;//body尺寸占满屏幕
background-color:#34495e;
display:flex;//body内部整体居中
justify-content: center;
align-items:center;
article{
width:400px;
height:400px;
border:solid 2px #95a5a6;
overflow:hidden;
box-shadow: 0 0 10px rgba(#000000, 1);
perspective: 900px;
section{
display:grid;
grid-template-rows: repeat(2,400px);//设置两行一列 栅格元素均为400px
transform:translateY(-50%) ;
.description{
display:flex;
justify-content: center;//描述性文字整体居中
align-items:center;
background-color:#f6e58d;
}
}
&:hover>section{
transition-duration:1s;
transform:translateY(0) rotateX(360deg) ;//进行Y轴平移和X轴翻转出现图片描述性文字
}
}
}在这里插入代码片
3 、结果图
点击图片出现解释性文字