06.旋转.html

最新推荐文章于 2025-05-01 00:18:14 发布

猪小屁、

最新推荐文章于 2025-05-01 00:18:14 发布

阅读量131

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML+CSS_08_animation 文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_47952737/article/details/120576963

HTML+CSS_08_animation 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用HTML、CSS和JavaScript创建一个3D翻转效果的div元素。通过CSS的`backface-visibility`属性和`:hover`伪类，实现当鼠标悬停时，元素沿y轴旋转并平移，展示了前端交互设计的一个实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            perspective: 800px;
        }
        body{
            border: 1px red solid;
            background-color: silver;
        }
        .box1{
            width: 320px;
            height: 320px;
            background-color: #bfa;
            margin: 200px auto;
            transition: all 2s;

            /* 
                backface-visibility设置是否显示元素的背面 
                    可选值
                        visible 默认值 可以显示元素的背面
                        hidden 不显示元素的背面
            */
            backface-visibility: visible;
        }
        body:hover .box1{
            /* 
                通过旋转，可以使元素绕着x，y或z轴旋转指定的角度
                    rotateX()
                    rotateY()
                    rotateZ()
                        - 可选值
                            90deg <==> .25turn
                            180deg <==> .5turn
                            360deg <==> 1turn
             */
            /* transform: rotateZ(.25turn); */
            /* transform: rotateY(180deg) translateZ(400px); */
            transform: translateZ(400px) rotateY(180deg);
            /* transform: rotateY(30deg); */
        }
    </style>
</head>
<body>
    <div class="box1">
        <img src="./an.jpg" alt="">
    </div>
</body>
</html>