15天前端学习-第五天（个人记录）

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