HTML连载75-3D转换模块之正方体

2020-03-16 05:45:08来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

HTML连载75-3D转换模块之正方体

一、正方体

核心要点就是:使用3D转换模块,以及平移、旋转的在X、Y、Z轴上的应用

 

    <style>

        *{

            margin:0;

            padding:0;

        }

        ul{

            width: 200px;

            height: 200px;

            border: 1px solid black;

            box-sizing:border-box;

            margin:100px auto;

            position:relative;

            transform: rotateY(0deg) rotateX(0deg);

            transform-style: preserve-3d;/*转换成一个3D的面*/

?

        }

        li{

            list-style: none;

            width: 200px;

            height: 200px;

            text-align:center;

            line-height:200px;

            font-size:60px;

            position:absolute;

        }

        ul li:nth-child(1){

            background-color: red;

            transform:translate(-100px) rotateY(-90deg);

?

        }

        ul li:nth-child(2){

            background-color: blue;

            transform:translate(100px) rotateY(90deg);/*复习了translate是左右平移,可指定按照哪个轴平移,比如transformY就是上下平移*/

        }

        ul li:nth-child(3){

            background-color: purple;

            transform:translateY(100px) rotateX(-90deg);

        }

        ul li:nth-child(4){

            background-color: pink;

            transform:translateY(-100px) rotateX(90deg);

        }

        ul li:nth-child(5){

            background-color: white;

            transform:translateZ(100px) rotateX(0deg);

        }

        ul li:nth-child(6){

            background-color: yellow;

            transform:translateZ(-100px) rotateX(-180deg);

        }

.........省略代码..........

<ul>

    <!--这里的六个li代表的就是正方体的六个面-->

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

    <li>6</li>

</ul>

</body>

 

二、源码:

D183_CubeOf3DTransformModule.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/D183_CubeOf3DTransformModule.html?

2.CSDN:https://blog.csdn.net/weixin_44630050

3.博客园:https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流,后台回复“礼包”获取Java大数据学习视频礼包

 

 


原文链接:https://www.cnblogs.com/ruigege0000/p/12501291.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:hammer.js实现移动端幻灯片

下一篇:前端现在有发展前途吗?应届生好找工作吗?