<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
position: relative;
width: 250px;
height: 250px;
border: 1px solid #000;
margin: 200px auto;
/* 真正3d */
transform-style: preserve-3d;
/* 辅助 */
transform: rotateY(2deg) rotateX(15deg);
/* 过渡 */
transition: transform 6s;
}
.box:hover {
transform: rotateY(360deg) rotateX(360deg);
}
.box > div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 250px;
font-size: 150px;
}
.left {
background-color: #f99;
transform: translateX(-125px) rotateY(-90deg);
}
.right {
background-color: deepskyblue;
transform: translateX(125px) rotateY(90deg);
}
.before {
background-color: yellowgreen;
transform: translateZ(125px);
}
.back {
background-color: #123456;
transform: translateZ(-125px);
}
.top {
background-color: yellow;
transform: translateY(-125px) rotateX(90deg);
}
.bottom {
background-color: red;
transform: translateY(125px) rotateX(90deg);
}
</style>
</head>
<body>
<div class="box">
<div class="top">上</div>
<div class="bottom">下</div>
<div class="before">前</div>
<div class="back">后</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
</body>
</html>
H5C3实现正方体的旋转
猜你喜欢
转载自blog.csdn.net/weixin_44114310/article/details/89336071
今日推荐
周排行