我正在参加 码上掘金体验活动，详情：show出你的创意代码块 一起养成写作习惯！
这是我参与「掘金日新计划 · 4 月更文挑战」的第15天，点击查看活动详情。
效果展示
用到的知识点
html:简单的图片插入
*注意一下~ 在码上掘金插入图片的时候，建议插入在线图=片，比如无版权的图片网站，找到你想要的图片，右键复制图片地址即可。
css：flex布局，元素选择器，鼠标悬浮时的透明度，旋转transform
代码展示
html
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<!-- <script type="text/javascript" src="js/index.js"></script> -->
</head>
<body>
<div>
//在网络上找找的图片
<div class="container">
<img src="https://images.unsplash.com/photo-1608463026422-8f43ab4ebac0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80" class="a1">
<img src="https://images.unsplash.com/photo-1600595289052-bcab428c5b82?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" class="a2" >
<img src="https://images.unsplash.com/photo-1579187707643-35646d22b596?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=388&q=80" class="a3" >
</div>
</div>
</body>
</html>
css
/* 清楚浏览器原来的格式 */
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
/* flex布局 */
display: flex;
/* 使写出的元素进行居中处理 */
justify-content: center;
align-items: center;
height: 100vh;
}
head img{
position: absolute;
display: block;
}
.a1,.a2,.a3{
width: 320px;
height: 480px;
}
/* 鼠标悬浮在图片前的透明度 */
img
{
/* opacity属性:改变图片透明度 ; */
opacity:1.0;
}
/* 鼠标悬浮在图片后的透明度 */
img:hover
{
opacity:0.3;
transform: rotateY(510deg);
}
整体思路：
html部分先选出了3张图片，将其进行展示。
css部分，先把这三张图片选择了适合的大小进行展示，之后进行了鼠标悬浮前后的透明度的设置，最后对选中的图片进行旋转。
