当前位置：网站首页>【Case】3d navigation

【Case】3d navigation

2022-08-05 16:22:00 【daze girl】 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> * {
       margin: 0; padding: 0; } ul {
       width: 600px; height: 35px; margin: 100px auto; } ul li {
       float: left; position: relative; width: 95px; height: 100%; margin-right: 5px; list-style: none; /* 透视效果 */ perspective: 500px; } .box {
       width: 100%; height: 100%; /* 为子元素开启3d效果 */ transition: all .7s; transform-style: preserve-3d; } .front, .bottom {
       position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; line-height: 35px; } .front {
       background-color: chartreuse; z-index: 1; /* 3. The front box moves forward a box-like distance, Make sure that the center of rotation is at the center of the cube(That is, the position of the screen) */ transform: translateZ(17.5px); } .bottom {
       background-color: cornflowerblue; /* 1. 沿xFlip the shaft forward90deg*/ /* 2. Move the box down half the distance */ /* Note that the move must be written first */ transform: translateY(50%) rotateX(-90deg); } ul li:hover .box {
       transform: 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>
        <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>

在这里插入图片描述

原网站

版权声明
本文为[daze girl]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/217/202208051610548332.html

边栏推荐

猜你喜欢

随机推荐