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

最新推荐文章于 2023-03-02 15:31:52 发布

Pink&Sakura

最新推荐文章于 2023-03-02 15:31:52 发布

阅读量717

点赞数

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/galaxyrt/article/details/117413358

版权

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

关键词由优快云通过智能技术生成

下面是源代码，鼠标悬浮在图片上时图片翻转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-s