做法:
6个div重叠,设置旋转中心点为z轴上某一点,按水平四个面,分别按中心点
旋转90度、180度、270度等,上下两个面，分别将旋转点设置在div的上边线和下边线,再分别绕x轴旋转对应的90度
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./index.css">
<style>
.box{
width: 400px;
height: 400px;
/* border: solid 1px blueviolet; */
display: flex;
align-items: center;
justify-content: center;
transform-style:preserve-3d ;
transform: perspective(900px) ;
margin: 100px auto;
transition: 2s;
transform-origin: center center 100px;
}
.box:hover{
transform: perspective(2000px) rotateX(180deg) rotateY(180deg);
}
.box>div{
width: 200px;
height: 200px;
position: absolute;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
font-size: 4em;
transform-origin: center center 100px;
opacity: 0.2;
}
.box>div:nth-child(1){
background-color: darkblue;
transform:rotateY(90deg);
}
.box>div:nth-child(2){
background-color: green;
transform:rotateY(180deg);
}
.box>div:nth-child(3){
background-color: cadetblue;
transform:rotateY(270deg);
}
.box>div:nth-child(4){
background-color: violet;
transform:rotateY(360deg);
}
.box>div:nth-child(5){
background-color: chocolate
transform-origin: top;
transform:rotateX(90deg);
}
.box>div:nth-child(6){
background-color: palegoldenrod;
transform:rotateX(-90deg);
}
</style>
</head>
<body class='me'>
<div class='box'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
效果图:
294
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
