web前端--音乐魔方旋转相册笔记（1）

最新推荐文章于 2022-05-25 10:33:44 发布

樱木花道也学编程

最新推荐文章于 2022-05-25 10:33:44 发布

阅读量791

点赞数 4

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_42994523/article/details/106691473

版权

前段时间，520的时候就用自己学习到的一点HTML,CSS,Javascript等，给女朋友做了一个简单的网页，这里记录一下其中的一小部分—音乐魔方旋转相册。

- 这里魔方相册的例子思路来自学习的一门课程

下面正式开始：
音乐魔方相册：
需要用div来作出一个魔方来展示照片,首先做一个六面的魔方。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>送给你的相册</title>
	</head>
<body>
<div class="">
<div class="container"><!--最外层，将做好的魔方放在盒子里，后期定位-->
	<div class="box"><!--整个魔方-->
	<!--作出魔方的6个面，并赋予class名-->
		<div class="box-page top"></div>
		<div class="box-page bottom"></div>
		<div class="box-page left"></div>
		<div class="box-page right"></div>
		<div class="box-page front"></div>
		<div class="box-page back"></div>
	</div>
</div>
</body>

给魔方六个面分别给一种颜色看看，魔方效果。这部分需要css来实现。

*{
   /*清除页面的参数*/
	margin: 0;
    padding: 0;
}
.container{
   /*魔方的大小，可根据效果调整*/
    width: 300px;
	height: 300px;
    border: 1px solid #000;/*对面做一个边框*/
	margin: 150px auto;
	   }
.box{
   
		width: 300px;/*面的大小自己可以根据魔方大小调整*/
		height: 300px;
		box-sizing: border-box;
		background-color: red;
		}

此时运行发现页面中只有一个红色的正方形，
在这里插入图片描述
其实我们可以将做好的魔方每个面着色并将魔方整体旋转一下，将便于观察。
上面添加：

       /*控制子元素3D转换*/
          transform-style:preserve-3d;            
       /*将盒子旋转，测试代码*/
          transform:rotateX(45deg) rotateY(45deg);

可以看到的效果如下：

上图是魔方转换到某时刻时的截图，可以看出，我们前面创建的魔方六个面全部在魔方的中间，因此要实现魔方六个面分别在魔方的上下左右前后，需要将六个面进行旋转。
（其实六个面是重叠在一起，在魔方底面，这里截图是为了后面建立坐标轴便于理解。）

我们可以自己对魔方建立X,Y,Z坐标轴。可以自己画一下，便于我们写面的旋转。
（下面我简单的画了一下，哈哈哈）
箭头方向均为正方向，反方向，数值为负。

这里需要用属性 transform，
（1）用到的旋转方法为，rotateX(),rotateY(),rotateZ(),按照x方向旋转则为rotateX(),y方向为rotateY()..，括号里为旋转角度；
（2）还要用到.translate() 方法，使元素从其当前位置移动，括号里写移动的距离 ，这里为坐标。

下面为六个面的旋转，移动，代码：

.box-page{
   
	width: 300px;
	height: 300px;
	position: absolute;/*位置初始化，相对于魔方盒子定位*/
	transform-style:preserve-3d;/*必须有该属性，否则将不会旋转，移动。*/
	}
.top{
   
	transform:translateZ(150px);/*150px,正值为沿着Z轴向上（正方向）移动150px