15天前端学习-第五天（个人记录）_前端开发工程师实习日记15天-CSDN博客

本文链接：https://blog.csdn.net/m0_48338638/article/details/106607993

这篇博客记录了作者在学习前端3D效果时的经验，主要探讨了perspective属性如何创建3D视觉，transform-style用于保持3D空间，以及transform-origin设置旋转中心。还介绍了制作立方体的关键点，并展示了使用JavaScript实现简单时钟的示例代码。作者意识到需要寻找更适合自己的JS学习方法，并指出由于时间限制，仅学习了HTML+CSS的3D基础知识。

摘要由CSDN通过智能技术生成

perspective能做3D的效果，(元素与视图的距离)可以理解为深度，其值为像素。(值越大幅度约小)
transform-style: preserve-3d;3D三维空间写在perspective里层
transform-origin: center center -50px;(值1:x轴,值2:y轴,值3:z轴(不支持center))立方体旋转的基点。
制作立方体主要是对,立方体几个面的理解以及移动,对折,翻转各方向移动变化的理解.
在这里插入图片描述翻转
前移

翻转与前移的代码
    <style>
        .box1{width: 300px;height: 300px; border: 1px solid black; margin: 60px auto;perspective: 200px;}
        .box2{width: 100px;height: 100px;background: cadetblue; margin: 60px auto;transition: 1s; transform:translateZ(0);}
        /* 翻转 */
        /* .box1:hover .box2{transform: rotateX(180deg);} */
        /* 前移 */
        .box1:hover .box2{transform: translateZ(100px);}
        
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

在这里插入图片描述

立方体的代码部分 主要是要对立方体几个面的翻转理解透彻
  <style>
        *{margin: 0; padding: 0;}
        ul {list-style: none;width: 100px; height: 100px; background: red;margin: 100px;position: relative;transform-style: preserve-3d;transition: 1s; transform-origin: center center -50px;}
        .box{width: 300px;height: 300px; border: 1px solid black; margin: 30px auto;perspective: 200px;}
        .box ul li{width: 100px;height: 100px;position: absolute; line-height: 100px;text-align: center;color: white;font-size: 26px; }
        .box ul li:nth-child(1){background: rebeccapurple;left: 0;top: 0;}
        /* 旋转基点设置为左边,旋转九十度  注意旋转角度及方向 */
        .box ul li:nth-child(2){background: royalblue;left: 100px;top: 0;transform-origin:left;transform: rotateY(90deg);}
        .box ul li:nth-child(3){background: rgb(111, 228, 236);left: -100px;top: 0;transform-origin:right;transform: rotateY(-90deg);}
        .box ul li:nth-child(4){background: rgb(206, 175, 92);left: 0;top: -100px;transform-origin:bottom;transform: rotateX(90deg);}
        .box ul li:nth-child(5){background: rgb(9, 31, 228);left: 0;top: 100px;transform-origin:top;transform: rotateX(-90deg);}
        .box ul li:nth-child(6){background: rgb(228, 9, 155);left: 0;top:0;transform: translateZ(-100px) rotateX(180deg);}
        .box:hover ul{transform: rotateX(180deg) rotateY(180deg);}
    </style>
</head>
<body>
    <div class="box">
        <ul>
        <!-- 立方体六个面 -->
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
    
</body>

JS部分:
做了个很简单的时钟
sj();
function sj(){
var gx = document.getElementById(“aa”);
var times = new Date();
gx.innerHTML = times;
}
// 只设定一次的定时器
// window.setTimeout(“sj()”,1000);
// 重复执行的
window.setInterval(“sj()”,1000);
JS对于我可能需要找到更合适的学习方法。

总结:今天仅学了html+css关于3D的小部分知识,时间有限!