css3 3d实例之上下旋转

最新推荐文章于 2024-01-31 17:45:45 发布

Master_Yoda

最新推荐文章于 2024-01-31 17:45:45 发布

阅读量915

点赞数

分类专栏：前端文章标签： css3 html5 javascript css

本文链接：https://blog.csdn.net/dream_follower/article/details/104493077

版权

前端专栏收录该内容

19 篇文章 2 订阅

订阅专栏

要实现的案例效果：
在这里插入图片描述这个主要用到css3的旋转和移动的属性，

首先使用绝对定位，然后先移动下面那个盒子，向下移动，然后再沿x轴旋转，然后再将前面那个盒子沿着z轴正方向进行移动。如下图：
在这里插入图片描述然后当鼠标放上去的时候，再沿着x轴正向旋转90度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            /*取消默认的内外边距*/
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        ul{
            margin: 100px ;
        }
        ul li{
            float: left;
            width: 120px;
            height:35px;
            margin: 5px;
            /*设置视距这个一定要加在被视察元素的父盒子上面*/
            perspective: 400px;
        }
        .box{
            position: relative;
            width: 100%;
            height: 100%;
            line-height: 35px;
            text-align: center;
            transform-style: preserve-3d;
            transition: all 1.5s;
        }
        .box:hover{
            transform: rotateX(90deg);
        }
        .front,
        .bottom{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            right: 0;
            background-color: pink;
        }
        .front{
            z-index: 1;
            transform: translateZ(17.5px);
        }
        .bottom{
            background-color: purple;
            transform:translateY(17.5px) rotateX(-90deg);
        }

    </style>
</head>
<body>
<ul>
    <li>
        <div class="box">
            <div class="front">前面</div>
            <div class="bottom">下面</div>
        </div>
    </li>
    <li>
        <div class="box">
            <div class="front">前面</div>
            <div class="bottom">下面</div>
        </div>
    </li>
    <li>
        <div class="box">
            <div class="front">前面</div>
            <div class="bottom">下面</div>
        </div>
    </li>
</ul>
</body>
</html>

Master_Yoda

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
css3 3d实例之上下旋转

要实现的案例效果：这个主要用到css3的旋转和移动的属性，首先使用绝对定位，然后先移动下面那个盒子，向下移动，然后再沿x轴旋转，然后再将前面那个盒子沿着z轴正方向进行移动。如下图：然后当鼠标放上去的时候，再沿着x轴正向旋转90度。<!DOCTYPE html><html lang="en"><head> <meta charset="U...
复制链接

扫一扫