<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>魔方</title>
<style>
html {
perspective: 888px;
/*设置元素被查看位置的视图: 设置了这个才有后面的3d效果*/
}
.club-wrapper {
width: 300px;
height: 300px;
/*开启它的相对定位 让它的子元素参照它 绝对定位*/
position: relative;
margin: 250px auto;
/*设置3d变形效果*/
transform-style: preserve-3d;
animation: run 15s infinite linear;
}
/*设置club-wrapper下的所有的div的样式 给他们宽度和透明效果*/
.club-wrapper>div {
width: 100%;
height: 100%;
/* 设置透明度 */
opacity: 0.
利用css写一个魔方
于 2022-04-21 12:30:05 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)