【未解】图片翻转效果

在练习实现图片正反动态翻转时，没有实现理想效果，同时发现在内层和外层分别加overflow：auto时，也会有不同的效果，但是不明白时为什么？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正反翻转效果</title>
    <style>
        .card {
            width: 640px;
            height: 1124px;
            position: relative;

            perspective: 650px;
            transform-style: preserve-3d;
            transition: all 0.8s ease;
        }

        .back, .front {
            position: absolute;
            top: 0;
            left: 0;

            width: 100%;
            height: 100%;

            backface-visibility: hidden;
            overflow: auto;
        }

        .back {
            transform: rotateY(-180deg);
        }

        .card:hover {
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
<div class="card">
    <div class="back">
        <img src="../static/img/photo_2022-11-10_08-32-07反面.jpg" alt="">
    </div>
    <div class="front">
        <img src="../static/img/photo_2022-11-10_08-32-07正面.jpg" alt="">
    </div>
</div>
<div class="card">
    <div class="card-side front"><img src="../static/img/photo_2022-11-10_08-54-06正面.jpg" alt=""></div>
    <div class="card-side back"><img src="../static/img/photo_2022-11-10_08-54-06反面.jpg" alt=""></div>
</div>

</body>
</html>

实现了理想的效果，但是其中的细节还没有理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css实现卡片翻转效果</title>
    <style>
        body {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;

            perspective: 900px;
        }

        div {
            width: 640px;
            height: 1124px;
            position: absolute;
            backface-visibility: hidden;

            transform-style: preserve-3d;
        }

        img {
            width: 640px;
            height: 1124px;
            border-radius: 20px;
        }

        .a1 {
            transform: rotateY(180deg);
            transition: 2s;
        }

        .a2 {
            transition: 2s;
        }

        body:hover .a1 {
            transform: rotateY(0deg);
        }

        body:hover .a2 {
            transform: rotateY(-180deg);
        }
    </style>
</head>
<body>
<div class="aa">
    <div class="a1"><img src="../static/img/photo_2022-11-10_08-32-07反面.jpg" alt=""></div>
    <div class="a2"><img src="../static/img/photo_2022-11-10_08-32-07正面.jpg" alt=""></div>
</div>

</body>
</html>

找到一点线索，好像要实现立体的翻转效果，transformstyle要放在perspective的下一层级，也就是先定好空间，在指定呈现方式，如果放在同一级，看到的还是平面的翻转效果

perspective 是透视，可以让电脑模拟 3d效果，实现近大远小的效果。
transform-style 立体呈现可以让子元素里面按照设置位移，旋转，缩放，扭曲等。如果不给父元素这个属性，这里面所有的子盒子都是平面的。
正常情况下：
爷爷设置perspective
父亲设置transform-style: preserve-3d
孩子们设置位移，旋转，缩放，扭曲等。

并且在mdn中transform-style页面也说

transform-style
The transform-style CSS property sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element.

参考资料：

posted @ 2022-11-19 10:59 胡安阅读(70) 评论(0) 收藏举报

刷新页面返回顶部

陋室

To Be Yourself！！

【未解】图片翻转效果