练习demo

2019-09-22 13:42:05 作者：互联网

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,传上来了，么么哒！

标签：demo,练习,90deg,transform,height,100px,absolute,200px
来源： https://blog.csdn.net/jiepp/article/details/101154877