2020/7/28 3D盒子移动端拖拽

最新推荐文章于 2023-03-27 15:32:31 发布

太想进步了

最新推荐文章于 2023-03-27 15:32:31 发布

阅读量209

点赞数

文章标签： 3D盒子移动端

本文链接：https://blog.csdn.net/qq_44755188/article/details/107643664

版权

本文探讨了移动端3D盒子的开发，包括适配、touch事件和响应式设计。重点讲解了viewport设置以禁止页面缩放，并介绍了移动端触摸事件的对象和属性，以及移动端拖拽盒子的原理。

摘要由CSDN通过智能技术生成

3D盒子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        width: 200px;
        height: 200px;
        position: relative;
        margin: 200px auto;
        transition: all 5s ease;
        transform: perspective(600px) rotateX(0deg) rotateY(0deg);
        transform-style: preserve-3d;
    }
    
    .box div {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border: 1px solid;
        position: absolute;
        left: 0;
        top: 0;
        background-color: rgba(0, 0, 0, .3);
    }
    
    .box:active {
        transform: perspective(700px) rotateX(360deg) rotateY(180deg);
    }
    
    .box div.front {
        transform: translateZ(100px);
    }
    
    .box div.back {
        transform: translateZ(-100px);
    }
    
    .box div.right {
        transform: rotateY(90deg) translateZ(100px)
    }
    
    .box div.left {
        transform: rotateY(-90deg) translateZ(100px);
    }
    
    .box div.top {
        transform: rotateX(90deg) translate