css设计立方体旋转效果遇到的问题及理解解决方法

Fe2Fe3

已于 2022-11-25 08:27:21 修改

阅读量642

点赞数 2

分类专栏：前端文章标签： css3 html 前端

于 2022-11-24 19:53:41 首次发布

本文链接：https://blog.csdn.net/Fe2Fe3/article/details/128024383

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今日在学习立方体旋转效果这里的时候，了解了老师的思路后自己先尝试做了一个，最终旋转使旋转了，但看起来总感觉怪怪的，旋转轴跟想要的效果不一样

        .one li a:first-child{
            background-color: skyblue;
        }
        .one li a:last-child{
            background-color: orange;
            transform: rotateX(90deg) translateZ(20px) translateY(-20px);
        }

最初只是移动了立方体顶部的盒子来造出立方体，后来查资料才知道立方体的空间坐标系原点一直是不变的，这样我的立方体正面一直在面xoy上，所以如果想实现一个立方体原地旋转的效果，每个面都需要移动

对原来的代码进行改进

        .one li a:first-child{
            background-color: skyblue;
            transform: translateZ(20px);
        }
        .one li a:last-child{
            background-color: orange;
            transform: rotateX(90deg) translateZ(20px);
        }

立方体旋转错误2

好了，这样就结束了，最后附上全篇代码

<!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>
        *{
            list-style: none;
            margin: 0;
            padding: 0;
            text-decoration: none;
            
        }
        .one{
            width: 270px;
            height: 40px;
            margin: 100px auto;
            transform: rotateY(20px) rotateX(20px);
            /* position: relative; */
        }

         .one li{
            display: block;
            width: 90px;
            height: 40px;
            transform-style: preserve-3d;
            float: left;
            transition: all 0.5s;
        }
        .one li a:first-child{
            background-color: skyblue;
            transform: translateZ(20px);
        }
        .one li a:last-child{
            background-color: orange;
            transform: rotateX(90deg) translateZ(20px);
        }
        a{
            color: black;
            display: block;
            width: 100%;
            height: 100%;
            
            
            line-height: 40px;
            text-align: center;
            position: absolute;
            left: 0;
            top: 0;
        }
       .one li{
        position: relative;
       }
       
       .one li:hover {
        transform: rotateX(-90deg) ;
        
       }
       
       
    </style>
</head>
<body>
    
        <div class="one">
        <ul>
            <li>
                <a href="#">登录</a>
                <a href="#">inter</a>
            </li>
            <li>
                <a href="#">注册</a>
                <a href="#">zhuce</a>
            </li>
            <li>
                <a href="#">历史</a>
                <a href="#">lishi</a>
            </li>
        </ul>
        </div>
    
</body>
</html>

（哪位大佬能提供一些好用的画图工具给我吗，电脑自带的太难用了(ToT)/~~~）

Fe2Fe3

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css设计立方体旋转效果遇到的问题及理解解决方法

今日在学习立方体旋转效果这里的时候，了解了老师的思路后自己先尝试做了一个，最终旋转使旋转了，但看起来总感觉怪怪的，旋转轴跟想要的效果不一样。最初只是移动了立方体顶部的盒子来造出立方体，后来查资料才知道立方体的空间坐标系原点一直是不变的，这样我的立方体正面一直在面xoy上，所以。如果想实现一个立方体原地旋转的效果，每个面都需要移动。对原来的代码进行改进。
复制链接

扫一扫