3d立方体过渡动画
通过3d立方体动画学习transform transition的使用
效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>3D立方体</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
transform: rotate3d(1, 1, 0, -45deg);
transform-style: preserve-3d;
/* transition-property: transform;
transition-duration: 2s; */
transition: transform 3s linear 1s;
}
.box:hover{
transform: rotate3d(1, 0.5, 0, 60deg);
}
.box > div {
padding:80px 40px;
font-size: 38px;
position: absolute;
width: 200px;
height: 200px;
box-sizing: border-box;
opacity: 0.5;
transition: transform 2s linear 1s;
}
.front {
background: red;
}
.back {
background: gold;
}
.left {
background: greenyellow;
}
.right {
background: pink;
}
.top {
background: palegreen;
}
.bottom {
background: cyan;
font-weight: bold;
}
.box:hover .front {
transform: translateZ(100px);
}
.box:hover .back {
transform: translateZ(-100px);
}
.box:hover .left {
transform: translateX(-100px) rotateY(-90deg);
}
.box:hover .right {
transform: translateX(100px) rotateY(90deg);
}
.box:hover .top {
transform: translateY(-100px) rotateX(90deg);
}
.box:hover .bottom {
transform: translateY(100px) rotateX(-90deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">front</div>
<div class="back">back</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
87
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
