Web_CSS3_3d卡片旋转【案例】

最新推荐文章于 2025-03-17 11:49:42 发布

郝鑫芸

最新推荐文章于 2025-03-17 11:49:42 发布

阅读量637

点赞数

分类专栏：案例 css3 文章标签： css3 web

本文链接：https://blog.youkuaiyun.com/qq_40041509/article/details/108102194

版权

案例同时被 2 个专栏收录

1 篇文章

订阅专栏

css3

1 篇文章

订阅专栏

卡片旋转案例

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
</body>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            /*3D旋转就是在父元素中添加一个perspective属性a*/
            perspective: 600px;
        }
        ul{
            list-style: none;
            width: 400px;
            height: 500px;
            margin: 50px auto;
            position: relative;
            /*border: 1px solid #000;*/
            transform: rotateX(-45deg);
            /*要想使本身具有3d效果的元素的子元素也可以3d旋转 那么就要给当前父元素添加下面属性 transform-style：preserve-3d*/
            transform-style:preserve-3d;
        }
        ul>li{
            width: 100px;
            height: 200px;
            line-height: 200px;
            color: #ffffff;
            background-color: hotpink;
            text-align: center;
            font-size: 30px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        ul>li:nth-child(1){
            transform: rotateY(0deg) translateZ(200px);
        }
        ul>li:nth-child(2){
            transform: rotateY(60deg) translateZ(200px);
        }
        ul>li:nth-child(3){
            transform: rotateY(120deg) translateZ(200px);
        }
        ul>li:nth-child(4){
            transform: rotateY(180deg) translateZ(200px);
        }
        ul>li:nth-child(5){
            transform: rotateY(240deg) translateZ(200px);
        }
        ul>li:nth-child(6){
            transform: rotateY(300deg) translateZ(200px);
        }
    </style>

设置样式后的状态

hover状态下