CSS3简单的2D转换模块 transform(平移、缩放、旋转、倾斜)

最新推荐文章于 2023-08-28 19:04:53 发布

哇哈哈哈哈呀哇哈哈哈

最新推荐文章于 2023-08-28 19:04:53 发布

阅读量1.6k

点赞数 2

分类专栏： css 文章标签： 2D转换模式的演示

本文链接：https://blog.csdn.net/weixin_43818397/article/details/89815479

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css简单2D转换模块
在这里插入图片描述
2D转换模式的练习代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习转换</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .big{
            width: 300px;
            height: 40px;
            margin: 100px auto;
            text-align: center;
            line-height: 40px;
            background-color: pink;
            list-style: none;
        }
        .big>li{
            width: 300px;
            height: 40px;
        }
        .small>li{
            list-style: none;
            background-color: yellow;
            transform:rotateY(180deg);
            /*默认先翻转*/
            transition: all 1s;
            opacity: 0;
        }
        .big>li:hover .small>li{
            opacity: 1;
            transform:none;
        }

        .big>li:hover .small>li:nth-child(1){
            transition-delay: 0ms;
        }
        .big>li:hover .small>li:nth-child(2){
            transition-delay: 200ms;
        }
        .big>li:hover .small>li:nth-child(3){
            transition-delay: 300ms;
        }
        .big>li:hover .small>li:nth-child(4){
            transition-delay: 400ms;
        }
        .big>li:hover .small>li:nth-child(5){
            transition-delay: 500ms;
        }
        .big>li:hover .small>li:nth-child(6){
            transition-delay: 600ms;
        }
        .big>li .small>li:nth-child(6){
            transition-delay: 0ms;
        }
        .big>li .small>li:nth-child(5){
            transition-delay: 200ms;
        }
        .big>li .small>li:nth-child(4){
            transition-delay: 300ms;
        }
        .big>li .small>li:nth-child(3){
            transition-delay: 400ms;
        }
        .big>li .small>li:nth-child(2){
            transition-delay: 500ms;
        }
        .big>li .small>li:nth-child(1){
            transition-delay: 600ms;
        }
    </style>
</head>
<body>
<ul class="big">
    <li>我是菜单
        <ul class="small">
            <li>菜单1</li>
            <li>菜单2</li>
            <li>菜单3</li>
            <li>菜单4</li>
            <li>菜单5</li>
            <li>菜单6</li>
        </ul>
    </li>
</ul>
</body>
</html>

效果
在这里插入图片描述
主要利用表格ul和li制作二级菜单，当鼠标悬停在一级菜单的时候，二级菜单翻转且延时依次展示，当鼠标离开一级菜单li的时候，二级菜单统一依次延时收回。（1）当鼠标未悬停的时候，给一级菜单li设置透明度属性opacity:0，且默认transform:rotateY(180deg);
transition:all 1s;
（2）当鼠标悬停时，设置透明度opacity:1;
transform:none;
(3)依次给二级菜单设置悬停、未悬停的延时
.big>li .small>li:nth-child(5){
transition-delay:300ms;
}
.big>li:hover .small>li:nth-child(3){
transition-delay:200ms;
}