两面盒子翻转不成功解决方案

最新推荐文章于 2024-09-14 17:04:32 发布

小李同学Li

最新推荐文章于 2024-09-14 17:04:32 发布

阅读量112

点赞数

分类专栏：前端相关文章标签： css 前端 html

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_53338045/article/details/132117602

版权

前端相关专栏收录该内容

3 篇文章 0 订阅

订阅专栏

两个子盒子都添加backface-visibility: hidden;

backface-visibility: hidden;指定当元素背朝观察者时是否可见

全部代码

    <style>
        .box {
            perspective: 500px;
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            transition: all 2s;
            transform-style: preserve-3d;
        }

        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            font-size: 30px;
            text-align: center;
            line-height: 300px;
            transform-style: preserve-3d;
            backface-visibility: hidden;
        }

        .front {
            background-color: aqua;
            z-index: 1;
        }

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

        .box:hover {
            transform: rotateY(180deg);
        }
    </style>


<body>
    <div class="box">
        <div class="front">黑马程序员</div>
        <div class="back">我在这里等你</div>
    </div>
</body>

效果展示

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

小李同学Li CSDN认证博客专家 CSDN认证企业博客

码龄4年

3: 原创

203万+: 周排名

36万+: 总排名

831: 访问

: 等级

38: 积分

5: 粉丝

4: 获赞

2: 评论

7: 收藏

私信

关注

热门文章

分类专栏

前端相关 3篇

最新评论

关于微信小程序中navigationBarTitleText显示不出来
CSDN-Ada助手: 恭喜您写了第三篇博客！关于微信小程序中navigationBarTitleText显示不出来的问题确实是个常见的困扰，您的经验分享对解决这个问题很有帮助。希望您能继续分享更多关于微信小程序开发的经验和技巧，或许下一篇文章可以深入探讨一些实用的小程序功能或者性能优化方面的内容，期待您的更多精彩文章！ CSDN 正在通过评论红包奖励优秀博客，请看红包流：https://bbs.csdn.net/?type=4&header=0&utm_source=csdn_ai_ada_blog_reply3
旋转木马案例--3D转换和动画
CSDN-Ada助手: 评论：非常棒的博文！你对于3D转换和动画的解析非常清晰，让我对旋转木马案例有了更深入的理解。希望你能继续分享更多关于前端开发的知识和经验。除了你提到的使用动画绕Y轴旋转360度外，还有一些与该博文相关的扩展知识和技能，可以进一步丰富你的前端技术栈。例如，你可以探索CSS的过渡效果，通过定义不同的过渡属性和参数，实现更加流畅的旋转动画。此外，你还可以学习使用JavaScript库如Three.js来创建更复杂的3D效果，例如在旋转木马上添加光影效果或者交互式的用户操作。希望我的建议能对你有所帮助，期待看到更多精彩的博文！继续努力，加油！如何写出更高质量的博客，请看该博主的分享：https://blog.csdn.net/lmy_520/article/details/128686434?utm_source=csdn_ai_ada_blog_reply2
两面盒子翻转不成功解决方案
CSDN-Ada助手: 恭喜你的第一篇博客！标题“两面盒子翻转不成功解决方案”引起了我的兴趣。我很高兴看到你开始了博客创作，这是一个很棒的方式来分享你的见解和经验。从标题来看，你提到了一个问题，那就是两面盒子翻转的不成功。这是一个有趣的话题，我很期待在你的博客中看到你对这个问题的深入分析和解决方案。作为下一步的创作建议，我希望你可以在博客中提供更多的背景信息，例如为什么这个问题会出现，你在解决过程中遇到了什么困难，以及你是如何找到解决方案的。此外，你还可以分享一些实际案例或者个人经验，这样读者们可以更好地理解和应用你的解决方案。继续努力，我期待在你的下一篇博客中看到更多精彩的内容！推荐【每天值得看】：https://bbs.csdn.net/forums/csdnnews?typeId=21804&utm_source=csdn_ai_ada_blog_reply1

大家在看

最新文章

目录

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。