图片旋转动画（网页制作）

最新推荐文章于 2021-08-01 00:51:22 发布

Pink&Sakura

最新推荐文章于 2021-08-01 00:51:22 发布

阅读量671

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/galaxyrt/article/details/117413358

版权

HTML CSS 交互效果图片翻转前端开发

关键词由CSDN通过智能技术生成

Web前端专栏收录该内容

23 篇文章 6 订阅

订阅专栏

下面是源代码，鼠标悬浮在图片上时图片翻转180度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #piclist {
    float: left;
    width: 620px;
    height: 1050px;
    border: 3px solid #f70b65;
    background-color:cyan;
    border-radius: 10px;
}

.picbox {
    float: left;
    width: 300px;
    height: 510px;
    margin: 3px;
    border-radius: 20px;
    margin-top: 4px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: 2s;
    position: relative;
}

.picbox:hover {
    transform: rotateY(180deg);
}

.face {
    width: 300px;
    height: 510px;
    position: absolute;
    border-radius: 20px;
    margin-top: 4px;
}

.front {
    background-size: cover;
}

.front img {
    border-radius: 20px;
    width: 300px;
    height: 510px;
    margin-top: 4px;
    margin:3px;
}

.back {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    margin-top: 4px;
    margin:3px;
    border-radius: 20px;
    -webkit-transform: rotateY(180deg);
    -ms-stransform: rotateY(180deg);
    -o-transform: rotateY(180deg);

}

.back h3 {
    margin-top: 70px;
    font-size: 30px;
    color: white;
    text-align: center;
    font-family: "楷体";
}

.back h4 {
    margin-top: 20px;
    font-size: 25px;
    color: white;
    text-align: center;
    font-family: "楷体";
}

.back p {
    margin: 20px;
    font-size: 20px;
    color: white;
    text-align: center;
    font-family: "楷体";
}
    </style>
</head>
<body>
    <div id="piclist">
        <div class="picbox">
            <div class="face front"><img src="images/a5.jpg" alt=""></div>
            <div class="face back">
                <h3>书法</h3>
            </div>
        </div>
        <div class="picbox">
            <div class="face front"><img src="images/a11.jpg" alt=""></div>
            <div class="face back">
                <h3>故宫</h3>
            </div>
        </div>
        <div class="picbox">
            <div class="face front"><img src="images/a9.jpg" alt=""></div>
            <div class="face back">
                <h3>村居</h3>
                <h4>高鼎</h4>
                <p>草长莺飞二月天，</p>
                <p>扶梯杨柳醉春烟。</p>
                <p>儿童散学归来早，</p>
                <p>忙趁东风放纸鸢。</p>
            </div>
        </div>
        <div class="picbox">
            <div class="face front"><img src="images/a1.jpg" alt=""></div>
            <div class="face back">
                <h3>中国画</h3>
            </div>
        </div>
    </div>
</body>
</html>