JS案例-两面翻转盒子案例

最新推荐文章于 2023-06-14 10:42:06 发布

申申あ

最新推荐文章于 2023-06-14 10:42:06 发布

阅读量564

点赞数 2

分类专栏： Javascript 文章标签： css3 html

本文链接：https://blog.csdn.net/qq_43781887/article/details/124934272

版权

需要实现的效果：

鼠标移动到这个盒子上之后，翻转盒子，最后变成：

注意：需要在父盒子上面开启子盒子3d呈现，同时需要注意要设置前面的盒子的背面隐藏，即 backface-visibility: hidden，否则盒子翻转之后背面的盒子会被前面盒子的背面给覆盖掉。

完整代码如下：

<!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>
        body {
            perspective: 500px;
        }
        
        .box {

最低0.47元/天解锁文章

申申あ

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS案例-两面翻转盒子案例

需要实现的效果：鼠标移动到这个盒子上之后，翻转盒子，最后变成：注意：需要在父盒子上面开启子盒子3d呈现，同时需要注意要设置前面的盒子的背面隐藏，即 backface-visibility: hidden，否则盒子翻转之后背面的盒子会被前面盒子的背面给覆盖掉。完整代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &lt...
复制链接

扫一扫

专栏目录