纯CSS3 实现3D魔方
程序员文章站
2024-01-05 18:10:58
纯CSS3 实现3D魔方1、思路父盒子给子盒子开启立体空间，并开启透视，设置视距子盒子设置摆放位置，与我们画的正方体类似，按照平面正方体每个面的拜访位置，我们通过旋转、平移达到摆放的效果父盒子设置过渡鼠标悬停到父盒子，子盒子做出的行为，分别向各自的方向扩散，并且侧面要有一定的旋转，为90°，使其达到我们想看到的打开效果创建动画，0%-100%没问题，x轴和y轴旋转一周或者两周，即360°或者720°大盒子调用动画，大盒子旋转，子盒子就跟着转了2、源码
纯CSS3 实现3D魔方
1、思路
- 父盒子给子盒子开启立体空间，并开启透视，设置视距
- 子盒子设置摆放位置，与我们画的正方体类似，按照平面正方体每个面的拜访位置，我们通过旋转、平移达到摆放的效果
- 父盒子设置过渡
- 鼠标悬停到父盒子，子盒子做出的行为，分别向各自的方向扩散，并且侧面要有一定的旋转，为90°，使其达到我们想看到的打开效果
- 创建动画，0%-100%没问题，x轴和y轴旋转一周或者两周，即360°或者720°
- 大盒子调用动画，大盒子旋转，子盒子就跟着转了
2、源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D魔方</title>
<style>
/* 清除浏览器内外边距 */
* {
padding: 0;
margin: 0;
}
body {
background-color: #000000;
/* 子元素开启三维立体空间 */
transform-style: preserve-3d;
}
/* 公共样式开始了 */
/* 设置大盒子的样式 */
.photo {
/* 固定定位 */
position: fixed;
/* 使其最后可以在显示器* */
left: 0;
right: 0;
bottom: 0;
top: 0;
/* 子元素开启三维立体空间 */
transform-style: preserve-3d;
/* 开启动画，10s执行完成，匀速，无限运行，自动返回 */
animation: animation 20s linear infinite alternate;
}
/* 设置鼠标移动到img元素后行为的过度事件 */
.photo1 img {
transition: all 1s;
}
/* 公共样式结束了 */
/* 外层魔方开始了 */
.photo1 {
/* 正方形 */
width: 200px;
height: 200px;
/* 水平垂直居中 */
margin: 200px auto;
}
.photo1 img {
/* 正方形 */
width: 200px;
height: 200px;
/* 绝对定位 */
position: absolute;
top: 0;
left: 0;
opacity: 0.9;
background-color: pink;
border: 2px solid #333333;
}
/*设置正方形的6个面的位置
1、前后两个面的XY轴不动，只改变Z轴从自身向外扩散的距离(可视区为+，否则为-)
2、左右两个面Y轴旋转90deg，呈竖着的状态，Z轴从自身向外扩散(可视区为+，否则为-)
3、上下两个面X轴旋转90deg，呈平行的状态，Z轴从自身向外扩散(可视区为+，否则为-)
*/
.photo1 #before {
transform: translateZ(100px);
}
.photo1 #after {
transform: translateZ(-100px);
}
.photo1 #top {
transform: rotateX(90deg) translateZ(100px);
}
.photo1 #bottom {
transform: rotateX(90deg) translateZ(-100px);
}
.photo1 #right {
transform: rotateY(90deg) translateZ(100px);
}
.photo1 #left {
transform: rotateY(90deg) translateZ(-100px);
}
/* 鼠标悬停在大盒子上，则出现的效果
1、分别向自身方向的Z轴向外移动
2、自身的带有的XY轴数据继续正方向旋转90deg，使其视觉更有动态效果
*/
.photo1:hover #before {
transform: translateZ(160px);
}
.photo1:hover #after {
transform: translateZ(-160px);
}
.photo1:hover #top {
transform: rotateX(90deg) translateZ(160px);
}
.photo1:hover #bottom {
transform: rotateX(90deg) translateZ(-160px);
}
.photo1:hover #right {
transform: rotateY(90deg) translateZ(160px);
}
.photo1:hover #left {
transform: rotateY(90deg) translateZ(-160px);
}
/* 外层魔方结束了了 */
/* 内层魔方开始了 */
.photo2 {
width: 100px;
height: 100px;
margin: 250px auto;
}
.photo2 img {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
opacity: 0.9;
border: 2px solid #333333;
}
.photo2 #before {
transform: translateZ(50px);
}
.photo2 #after {
transform: translateZ(-50px);
}
.photo2 #top {
transform: rotateX(90deg) translateZ(50px);
}
.photo2 #bottom {
transform: rotateX(90deg) translateZ(-50px);
}
.photo2 #right {
transform: rotateY(90deg) translateZ(50px);
}
.photo2 #left {
transform: rotateY(90deg) translateZ(-50px);
}
/* 内层魔方结束了了 */
/* 创建动画
1、开始的时候在即原点
2、结束时XY轴旋转。旋转720deg是为了多旋转一圈，并且速度能快一点
*/
@keyframes animation {
form {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(720deg);
}
}
</style>
</head>
<body>
<!-- 外层魔方开始了 -->
<!-- 大盒子==>控制其旋转 -->
<div class="photo1 photo">
<!-- 照片==>摆放到合适的位置 -->
<img src="./images/01.jpg" alt="" id="before">
<img src="./images/02.jpg" alt="" id="after">
<img src="./images/03.jpg" alt="" id="top">
<img src="./images/04.jpg" alt="" id="bottom">
<img src="./images/05.jpg" alt="" id="left">
<img src="./images/06.jpg" alt="" id="right">
</div>
<!-- 外层魔方结束了 -->
<!-- 内层魔方开始了 -->
<!-- 大盒子==>控制其旋转 -->
<div class="photo2 photo">
<!-- 照片==>摆放到合适的位置 -->
<img src="./images/01.jpg" alt="" id="before">
<img src="./images/02.jpg" alt="" id="after">
<img src="./images/03.jpg" alt="" id="top">
<img src="./images/04.jpg" alt="" id="bottom">
<img src="./images/05.jpg" alt="" id="left">
<img src="./images/06.jpg" alt="" id="right">
</div>
<!-- 内层魔方结束了 -->
<audio controls autoplay loop>
<source src="./audio/弹钢琴的楠楠 - 【钢琴】windy hill（翻自 羽肿）.mp3" type="audio/mp3">
<source src="./audio/弹钢琴的楠楠 - 【钢琴】windy hill（翻自 羽肿）.ogg" type="audio/ogg">
</audio>
</body>s
</html>
本文地址：https://blog.csdn.net/abraham_ly/article/details/111143946