练习demo

最新推荐文章于 2024-10-29 18:59:46 发布

原创最新推荐文章于 2024-10-29 18:59:46 发布 · 244 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#3D

本文介绍了一个使用HTML和CSS实现的3D立方体翻转效果，通过鼠标悬停事件触发立方体沿不同轴旋转，展示了六个面的数字标识。代码中详细设置了3D变换属性，包括透视、旋转和平移。

3D初探

编辑器制作效果展示：

在这里插入图片描述

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {perspective: 2000px;perspective-origin: 500px -500px;position: absolute;width: 200px;height: 200px;left: 50%;top: 50%;margin-left: -100px;margin-top: -100px}
        #d {transition: all 2s;width: 200px;height: 200px;transform-style: preserve-3d;position: absolute}
        #d:hover {transform: rotate3d(0, 1, 0, -90deg)}
        #d:hover .d6 {transform: rotate3d(0, 1, 0, 90deg) translateX(-200px) translateZ(-100px)}
        #d div {transition: all 1s;border-radius: 50px;line-height: 200px;text-align: center;color: red;font-size: 50px;width: 200px;height: 200px;border: 1px solid black;background-color: deepskyblue;opacity: 1;position: absolute}
        .d1 {transform: translateZ(-100px) rotateZ(-180deg) rotateY(-180deg)}
        .d2 {transform: translateX(-100px) rotateY(-90deg)}
        .d3 {transform: translateY(100px) rotateX(270deg)}
        .d4 {transform: translateY(-100px) rotateX(90deg)}
        .d5 {transform: translateX(100px) rotateY(90deg)}
        .d6 {transform: translateZ(100px)}
    </style>
</head>
<body>
<div id="d1">
    <div id="d">
        <div class="d1">3</div>
        <div class="d2">5</div>
        <div class="d3">4</div>
        <div class="d4">2</div>
        <div class="d5">6</div>
        <div class="d6">1</div>
    </div>
</div>
</body>
</html>

整理笔记时发现自己做的小demo,传上来了，么么哒！