欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS实现背面图片翻转

程序员文章站 2022-04-24 15:12:58
...

知识点

  1. perspective 视距
  2. backface-visibility: hidden;
    背对屏幕隐藏

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            perspective: 400px;
        }

        div {
            width: 300px;
            height: 450px;
            margin: 100px auto;
            position: relative;
        }

        div img{
            width: 100%;
            height: 450px;
            position: absolute;
            top: 0;
            left: 0;
            /*过渡效果*/
            transition: all 1s;
        }

        div img:first-child{
            z-index: 1;
            /*不对向屏幕就隐藏*/
            backface-visibility: hidden;
        }

        div:hover img{
            transform: rotateY(180deg);
        }

    </style>
</head>
<body>
<div>
     <img src="img/fan.png" alt="">
     <img src="img/zheng.png" alt="">
</div>
</body>
</html>

运行效果

CSS实现背面图片翻转
点击后自动旋转,背对隐藏
CSS实现背面图片翻转

相关标签: Web开发