旋转盒子

最新推荐文章于 2023-02-25 15:20:40 发布

weixin_45970898

最新推荐文章于 2023-02-25 15:20:40 发布

阅读量220

点赞数 1

本文链接：https://blog.csdn.net/weixin_45970898/article/details/109198898

版权

<style>
        .box {
            width: 300px;
            height: 200px;
            border: 1px solid rebeccapurple;
            margin: 400px auto;
        }
        
        ul {
            list-style: none;
            margin: 0px;
            padding: 0px;
            width: 60px;
            height: 200px;
            background-color: royalblue;
            float: left;
        }
        
        ul {
            width: 60px;
            height: 200px;
            background-color: red;
            transform-style: preserve-3d;
            position: relative;
            transform-origin: center center -100px;
        }
        
        ul li {
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: rosybrown;
        }
        
        ul li:nth-child(1) {
            top: -200px;
            transform-origin: bottom;
            transform: rotateX(90deg);
            background-image: url('images/01.jpg');
        }
        
        ul li:nth-child(2) {
            transform: rotateX(180deg) translateZ(200px);
            background-image: url('images/02.jpg');
        }
        
        ul li:nth-child(3) {
            transform-origin: bottom;
            transform: rotateX(-90deg) translateY(200px);
            background-image: url('images/03.jpg');
        }
        
        ul li:nth-child(4) {
            /* transform: rotateX(-90deg) translateY(200px); */
            background-image: url('images/04.jpg');
        }
        
        html:hover .ul1 {
            transition: all 3s;
            transform: rotateX(-360deg);
        }
        
        html:hover .ul2 {
            transition: all 3s 0.2s;
            transform: rotateX(-360deg);
        }
        
        html:hover .ul3 {
            transition: all 3s 0.4s;
            transform: rotateX(-360deg);
        }
        
        html:hover .ul4 {
            transition: all 3s 0.6s;
            transform: rotateX(-360deg);
        }
        
        html:hover .ul5 {
            transition: all 3s 0.8s;
            transform: rotateX(-360deg);
        }
        
        .ul2 li {
            background-position: -60px 0px;
        }
        
        .ul3 li {
            background-position: -120px 0px;
        }
        
        .ul4 li {
            background-position: -180px 0px;
        }
        
        .ul5 li {
            background-position: -240px 0px;
        }
    </style>
<body>
    <div class="box">
        <ul class="ul1">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

        <ul class="ul2">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

        <ul class="ul3">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

        <ul class="ul4">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

        <ul class="ul5">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

图片资源文件可以自定义。
使用CSS3做出来的一个旋转盒子的代码。
所使用的CSS3中的知识点：
1、transform-style: preserve-3d; 将盒子设置成3D显示
2、transform-origin: center center -100px; 设置变化的开始位置
3、transform: rotateX(90deg); 设置盒子的旋转角度，这里有三个方向，xyz轴
4、立体坐标系
原点在盒子的中点，x轴右边为正方向，y轴上面为正方向，z轴面向自己为正方向
5、perspective: 800px; 设置视距，用于让图形显示得更立体
代码解析：
先看html结构，一个盒子中包含5和ul，ul中有4个li，这里5个ul用来将我们的立体盒子分成5份，4个li分别表示每一份的4个面。
css部分：设置盒子的宽高，为图片的宽高，将盒子放入页面的中心，然后修改ul的默认列表样式，以及自带的内边距和外边距，我们将盒子分成5份，所以这里的宽为60px，高度不变，设置一个背景颜色方便我们查看，后期可以删掉，让ul左浮动显示，所以ul就并排了，将ul设置成3D显示，以及相对定位，然后我们将ul中的li设置成绝对定位，分别设置4个li的变化位置，这里的变化包含平移，旋转，最后组成一个正方体的纵向的4个面，由于每一个ul的li都是相同的旋转平移变化，后面都是图片背景以及背景定位的代码。

weixin_45970898

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
旋转盒子

<style> .box { width: 300px; height: 200px; border: 1px solid rebeccapurple; margin: 400px auto; } ul { list-style: none; margin: 0px;
复制链接

扫一扫