HTML CSS 立体正方形代码：实现左、右、上三面效果
<!DOCTYPE html>
<html>
<head>
<title>立体正方形</title>
<style>
.container {
margin: 100px auto;
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: rotate 5s infinite linear;
}
.container:hover {
animation-play-state: paused;
}
.front, .back, .left, .right, .top {
position: absolute;
width: 200px;
height: 200px;
background-color: #ccc;
box-shadow: 0 0 10px rgba(0,0,0,.5);
transform-origin: center center;
}
.front {
transform: translateZ(100px);
}
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.left {
transform: translateX(-100px) rotateY(-90deg);
}
.right {
transform: translateX(100px) rotateY(90deg);
}
.top {
transform: translateY(-100px) rotateX(90deg);
}
@keyframes rotate {
from {transform: rotateY(0deg);}
to {transform: rotateY(360deg);}
}
</style>
</head>
<body>
<div class='container'>
<div class='front'></div>
<div class='back'></div>
<div class='left'></div>
<div class='right'></div>
<div class='top'></div>
</div>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/kLYn 著作权归作者所有。请勿转载和采集!