3D 旋转木马（微重点）翻转导航案例

最新推荐文章于 2022-11-21 16:13:43 发布

但行好事wlw

最新推荐文章于 2022-11-21 16:13:43 发布

阅读量306

点赞数 3

分类专栏： CSS 文章标签： 3d css3 css

本文链接：https://blog.csdn.net/egg_er/article/details/121190261

版权

CSS 专栏收录该内容

21 篇文章 6 订阅

订阅专栏

3D transform
3d效果，简单来说就是在2d的效果上加了一个z轴，相关的属性也是没有太大变化。

那有哪些独有的属性呢？

设置transform-style: preserve-3d; （一定要给父元素添加） 目的是保留子元素的3d效果。
设置perspective: 400px; (视距) 设置这个能让我们看到的元素更加具有立体感
所有的属性，例如（平移，旋转等）都多了一个z轴；

翻转导航栏案例
结构:


<body>
    <ul>
        <li>
            <div class="bigbox">
                <div class="front"></div>
                <div class="bottom"></div>
            </div>

        </li>

    </ul>
</body>

样式：


ul {
 	   list-style: none;
}

ul li {
    width: 100px;
    height: 50px;
    perspective: 1000px;
}

ul li .bigbox {
    transform-style: preserve-3d;
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 400px;
    transition: all 1s;
}

ul li .bigbox .front,
ul li .bigbox .bottom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

ul li .bigbox:hover {
    transform: rotateX(90deg);
}

ul li .bigbox .front {
    background-color: pink;
    transform: translateZ(25px);
}

ul li .bigbox .bottom {
    background-color: blueviolet;
    transform: translateY(25px) rotateX(-90deg);             // 让底部盒子移动到下方
}

另外：hover和transition过渡一定要一起用，才能看到鼠标放上去过程的效果。

旋转木马

结构：

 <div class="bigbox">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

样式：

<style>
        body {
            perspective: 1000px;
            /* background-color: #ccc; */
        }
        
        .bigbox {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 150px auto;
            transform-style: preserve-3d;
            animation: move 10s linear infinite;
        }
        
        .bigbox div {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: url(./media/dog.jpg) no-repeat;
            box-shadow: 0 0 80px rgba(30, 30, 30, .3);
            /* animation: move 10s linear infinite; */
        }
        
        .bigbox div:nth-child(1) {
            transform: translateZ(400px);
        }
        
        .bigbox div:nth-child(2) {
            transform: rotateY(60deg) translateZ(400px);
        }
        
        .bigbox div:nth-child(3) {
            transform: rotateY(120deg) translateZ(400px);
        }
        
        .bigbox div:nth-child(4) {
            transform: rotateY(180deg) translateZ(400px);
        }
        
        .bigbox div:nth-child(5) {
            transform: rotateY(240deg) translateZ(400px);
        }
        
        .bigbox div:nth-child(6) {
            transform: rotateY(300deg) translateZ(400px);
        }
        
        @keyframes move {
            0% {
                transform: rotateY(0deg);
            }
            100% {
                transform: rotateY(360deg);
            }
        }
    </style>

在这里插入图片描述

但行好事wlw

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
3D 旋转木马（微重点）翻转导航案例

3D transform3d效果，简单来说就是在2d的效果上加了一个z轴，相关的属性也是没有太大变化。那有哪些独有的属性呢？设置transform-style: preserve-3d; （一定要给父元素添加）目的是保留子元素的3d效果。设置perspective: 400px; (视距) 设置这个能让我们看到的元素更加具有立体感所有的属性，例如（平移，旋转等）都多了一个z轴；翻转导航栏案例结构:<body> <ul> <li&gt
复制链接

扫一扫