立方体翻页效果css
时间: 2023-10-18 10:30:41 浏览: 55
立方体翻页效果可以通过 CSS 3D 转换属性来实现。以下是一个示例代码:
```html
<div class="cube">
<div class="side front">Front</div>
<div class="side back">Back</div>
<div class="side left">Left</div>
<div class="side right">Right</div>
<div class="side top">Top</div>
<div class="side bottom">Bottom</div>
</div>
```
```css
.cube {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform: perspective(1000px);
transition: transform 1s;
}
.side {
position: absolute;
width: 200px;
height: 200px;
background-color: #ccc;
border: 2px solid #000;
box-sizing: border-box;
}
.front {
transform: translateZ(100px);
}
.back {
transform: rotateX(180deg) translateZ(100px);
}
.left {
transform: rotateY(-90deg) translateZ(100px);
}
.right {
transform: rotateY(90deg) translateZ(100px);
}
.top {
transform: rotateX(90deg) translateZ(100px);
}
.bottom {
transform: rotateX(-90deg) translateZ(100px);
}
.cube:hover {
transform: rotateY(180deg);
}
```
这段代码定义了一个立方体容器 `.cube` 和六个面 `.side`,每个面都使用不同的 `transform` 属性来控制其在立方体中的位置和旋转角度。通过鼠标悬停时的 `:hover` 伪类,可以实现立方体的翻转效果。
你可以将此代码复制到 HTML 文件中并在浏览器中查看效果。稍作调整可以适应你的需求。