css实现3D长方形，可旋转

最新推荐文章于 2024-08-26 16:26:38 发布
原创 最新推荐文章于 2024-08-26 16:26:38 发布 · 3.2k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3 #3D #长方体

本文介绍了一种使用CSS3实现的3D立方体翻转效果，通过精确控制每个面的位置和旋转角度来创建一个交互式的3D立方体。用户可以通过鼠标操作使立方体沿着X轴和Y轴旋转，并提供了自动展示各个面的功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

先上图：

实现过程:

1、长方体六个面 

before，after， top ,buttom,left,right

2、每个面不同旋转角度

before: 向前移动一半width宽度，transform: translateZ(${width/2}px)
after: 向后移动一半width宽度、y轴旋转180度  transform: `translateZ(${-width/2}px) rotateY(180deg)`
top: 以top为轴，x轴旋转90度，向后移动一半宽度 transform-origin: top; transform: `rotateX(90deg) translate(0, ${-width/2}px)`}
bottom: 以bottom为轴，x轴旋90度，向后移动一半宽度， 放缩width/height,width: `${width}px`, height: `${height}px`,transform: `rotateX(90deg) translate(0, ${-width/2}px) scale(0,width/height)`
left: 以left为轴，y轴旋转-90度，向左移动一半宽度，{transform: `rotateY(-90deg) translate(${-width/2}px, 0)`}
right: 以right为轴，y轴旋转90度，向右移动一半宽度，{transform: `rotateY(90deg) translate(${width/2}px, 0)`}
3、在外圈div做旋转
4、代码：box.vue
<template>
    <div class="box-wrap">
        <div class="box" id="box" style="transform: rotateX(0deg) rotateY(0deg);" :style="{width: `${width}px`, height: `${height}px`}" @mousedown="mousedown" @mousemove="mousemove" @mouseup="mouseup" @mouseout="mouseup">
            <div id="face-before" class="face face-before" :style="{transform: `translateZ(${width/2}px)`}">
                <slot name="before" ></slot>
            </div>
            <div id="face-after" class="face face-after" :style="{transform: `translateZ(${-width/2}px) rotateY(180deg)`}">
                <slot name="after"></slot>
            </div>
            <div id="face-top" class="face face-top" :style="{width: `${width}px`, height: `${width}px`, transform: `rotateX(90deg) translate(0, ${-width/2}px)`}">
                <slot name="top"></slot>
            </div>
            <div id="face-bottom" class="face face-bottom" :style="{width: `${width}px`, height: `${height}px`,transform: `rotateX(90deg) translate(0, ${width/2}px) scale(0,width/height)`}">
                <slot name="buttom"></slot>
            </div>
            <div id="face-left" class="face face-left" :style="{transform: `rotateY(-90deg) translate(${-width/2}px, 0)`}" >
                <slot name="left"></slot>
            </div>
            <div id="face-right" class="face face-right" :style="{transform: `rotateY(90deg) translate(${width/2}px, 0)`}">
                <slot name="right"></slot>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'box',
    data() {
        return {
            canMove: false,
            startX: 0,
            startY: 0,
            currentDeg: 0,
        }
    },
    props: {
        width: {
            type: Number,
            default: 300,
        },
        height: {
            type: Number,
            default: 300,
        },
    },
    methods: {
        //  mouseenter(ev) { // 按下鼠标
        //     this.canMove = true;
        //     this.startX = ev.clientX;
        //     this.startY = ev.clientY;
        // },
        mousedown(ev) { // 按下鼠标
            this.canMove = true;
            this.startX = ev.clientX;
            this.startY = ev.clientY;
        },
        mousemove(ev) {  // 鼠标移动
            if(this.canMove) {
                const $box = document.getElementById('box');
                const obj = this.getTransform();
                const x = this.startX - ev.clientX;
                const y = this.startY - ev.clientY;
                const newx = (obj.x - (y / this.height * 180));
                const newy = (obj.y - (x / this.width * 180));
                console.log('x / this.width * 90===', x / this.width * 180);
                console.log('newy===', newy);
                this.startX = ev.clientX;
                this.startY = ev.clientY;
                $box.style.transform = `rotateX(-5deg) rotateY(${newy}deg)`;
                this.currentDeg = newy;
            }
        },
        mouseout() { // 鼠标离开
            if(this.canMove) {
                const $box = document.getElementById('box');
                const value = this.currentDeg % 90;
                if(Math.abs(value) >= 45) {
                    $box.style.transform = `rotateX(0deg) rotateY(${this.currentDeg + (90 - value) + 0.01}deg)`;
                }else {
                    $box.style.transform = `rotateX(0deg) rotateY(${this.currentDeg - value + 0.01}deg)`;
                }
                
                this.canMove = false;
            }
        },
        showAuto() {
            const $box = document.getElementById('box');
            $box.style['transform-origin'] = 'center';
            $box.style.transform = `rotateX(-20deg) rotateY(20deg)`;
        },
        showTop() {
            const $box = document.getElementById('box');
            $box.style['transform-origin'] = 'center';
            $box.style.transform = `rotateX(-89.999deg) rotateY(0deg)`;
        },
        showLeft() {
            const $box = document.getElementById('box');
            $box.style['transform-origin'] = 'center';
            $box.style.transform = `rotateX(0deg) rotateY(89.999deg)`;
        },
        mouseup() { // 鼠标离开
            if(this.canMove) {
                const $box = document.getElementById('box');
                const value = this.currentDeg % 90;
                if(Math.abs(value) >= 45) {
                    if(value < 0) {
                        $box.style.transform = `rotateX(0deg) rotateY(${this.currentDeg - (90 - Math.abs(value)) + 0.01}deg)`;
                    }else {
                        $box.style.transform = `rotateX(0deg) rotateY(${this.currentDeg + (90 - Math.abs(value)) + 0.01}deg)`;
                    }
                    
                }else {
                    if(value < 0) {
                        $box.style.transform = `rotateX(0deg) rotateY(${this.currentDeg - value + 0.01}deg)`;
                    }else {
                        $box.style.transform = `rotateX(0deg) rotateY(${this.currentDeg + value + 0.01}deg)`;
                    }
                    
                }
                
                this.canMove = false;
            }
        },
        reset() {
            const $box = document.getElementById('box');
            $box.style.transform = `rotateX(-20deg) rotateY(20deg)`;
        },
        getTransform() {
            const $box = document.getElementById('box');
            const ts = $box.style.transform.split(' ');

            const xs = ts[0].indexOf('X(');
            const xe = ts[0].indexOf('deg');

            const ys = ts[1].indexOf('Y(');
            const ye = ts[1].indexOf('deg');

            const x = ts[0].substring(xs + 2, xe);
            const y = ts[1].substring(ys + 2, ye);
            return {
                x,
                y,
            }
        },
    },
    mounted() {

    },
}
</script>
<style lang="scss" scoped>
    .box-wrap {
        .box { 
            position: relative;
            z-index: 6;
            margin: auto;
            transform-style: preserve-3d;
            transform-origin: center, center;
            transition: transform 1s;
            .face {
                position: absolute;
                width: 100%;
                height: 100%;
                opacity: 0.3;
                font-size: 30px;
                
            }
            .face-before {
                transform: translateZ(150px);
                background-color:  rgb(0, 255, 170);
                text-align: left;
                
            } 
            .face-after {
                transform-origin: center;
                transform: translateZ(-150px) rotateX(-180deg);
                background-color: #0088cc;
            } 
            .face-top {
                transform-origin: top;
                transform: rotateX(90deg) translate(0, -150px);
                background-color: rgb(255, 0, 170);
            } 
            .face-bottom {
                transform-origin: bottom;
                transform: rotateX(-90deg) translate(0, 150px);
                background-color:  rgb(0, 255, 85);
            } 
            .face-left {
                transform-origin: left;
                transform: rotateY(-90deg) translate(-150px, 0);
                background-color: rgb(255, 208, 0);
            }
            .face-right {
                transform-origin: right;
                transform: rotateY(90deg) translate(150px, 0);
                background-color: rgb(255, 208, 0);
            }
        }
    }
</style>

5、使用：

<template>
    <div class="app-home">
        <header class="header">
            <div class="content">
                <div class="header-left">
                    <span class="title">凡夫俗子</span>
                    <span class="desc">我们追寻梦想， 因为那最令人开心</span>
                </div>
                <div class="header-right">

                </div>
            </div>
        </header>
        <box :height="300" :width="600" ref="box">
            <template slot="before">
                <div>before</div>
            </template>
            <template slot="after">
                <div>after</div>
            </template>
            <template slot="left">
                <div>left</div>
            </template>
            <template slot="right">
                <div>right</div>
            </template>
            <template slot="top">
                <div>top</div>
            </template>
            <template slot="bottom">
                <div>bottom</div>
            </template>
        </box>
    </div>
</template>

<script>
import box from '@/web/components/box3.vue'
export default {
    name: 'HelloWorld',
    data () {
        return {
            boxWidth: 1152,
            boxHeight: 600,
        }
    },
    components: {
        box
    },
    methods: {
        goTopClick() {
            this.$refs.box.showTop();
        },
        goLeftClick() {
            this.$refs.box.showLeft();
        },
        showAuto() {
            this.$refs.box.showAuto();
        }
    },
    mounted() {
        this.boxHeight = document.documentElement.clientHeight - 15;
        window.onresize = () => {
            this.boxHeight = document.documentElement.clientHeight - 15;
        };
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
    .app-home {
        background-color: #f5f5f5;
        .header {
            width: 100%;
            height: 60px;
            margin-bottom: 15px;
            background-color: rgba(255,255,255,.5);
            .content {
                width: 1200px;
                min-width: 1200px;
                margin: auto;
                overflow: auto;
                padding-left: 24px;
                padding-right: 24px;
                
                color: #00bbd3;
                .header-left {
                    .title {
                        display: inline-block;
                        vertical-align: middle;
                        margin-right: 24px;
                        line-height: 60px;
                        font-size: 25px;
                        letter-spacing: 0.2em;
                    }
                    .desc {
                        display: inline-block;
                        vertical-align: middle;
                        line-height: 60px;
                        font-size: 14px;
                    }
                }
                .header-right {
                    font-size: 12px;
                }
            }
        }
        
    }
</style>

微信小程序 - 最新详细实现正方形 3D 效果可拖动控制旋转立方体效果功能，立体感正方体随意转动翻转水平、垂直、多维度拖动，类似魔方的正方形滚动拖动展示控制效果，HTML元素容器上下左右进行控制和翻转
资深程序员
08-14 5557
微信小程序，vue2，vue3，立体正方形，3D魔方，正方体，可旋转拖曳，小程序3d效果展示，模型，立体旋转效果，死角旋转拖曳，微信小程序详细实现立体正方形的展示控制效果，缩放，手势控制，dom容器可以上下左右进行控制和翻转效果，魔方一样的正方形可以自由滚动拖动，微信小程序实现上下左右控制立体正方形，可以拖动正方形滚动，3D模型360°全景展示，旋转正方体，3D立方体旋转播放，拖拽旋转，可以控制的立方体，立方体旋转相册特效，旋转图形，方块，方体，魔方方块，旋转立方体，魔方旋转，单指旋转双指缩放移动，角度，微
04-CSS3-渐变色、2D转换、3D转换
记录java学习日常~
05-21 1321
CSS渐变色（Gradient）是指在元素背景中使用两种或多种不同的颜色进行过渡，超过两个颜色可以形成更为细腻的渐变效果。常见的CSS渐变色有线性渐变和径向渐变。 线性渐变从一个颜色到另一个颜色沿着一条直线渐变，实现代码如下： 其中，direction参数指定了线性渐变的方向，可以是to top、to bottom、to right、to left、to top left等等值；color-stop表示颜色变化节点，可以设置百分比值或距离值。以下CSS代码定义了从左上到右下的渐变色背景： 径向
使用 CSS3 制作可自由旋转的立方体的方法
最新发布
weixin_41978174的博客
08-26 619
可以使用 JavaScript 为立方体添加交互效果，例如当鼠标移动或点击时旋转立方体。这段代码监听鼠标移动事件，根据鼠标在屏幕上的位置计算出旋转角度，并应用到立方体上，使其随着鼠标移动而旋转。
CSS的3D应用：绘制长方体
Honiler的博客
07-21 2620
实现效果： 绘制步骤： ① 绘制6个面，2个正方形 + 4个长方形 ② 旋转各个面的角度 ③ 摆放各个面的位置 代码实现： <div class="cuboid"> <div class="bottom">下</div> <div class="top">上</div> <div class="right">右</div> <div class="left">左</div>
可视化系列讲解：css3D：如何绘制正方体，长方体等
wangyuiba1314的博客
12-31 2806
前端可视化系列讲解：css3D，svg，canvas等
纯css3写长方体上下旋转滚动
01-09 1880
今天老大让弄个动画- -弄好后，发现兼容不了安卓4.0版本= =不过，可以分享出来给大家看下。。。还蛮好玩的。。。 这个动画特效需要注意的是，我弄的是4个面的，如果你想要6个面的长方体的话，你需要调translatez轴的像数。。（150px）即可。 body{ transform-style:preserve-3d; -webkit-transform-style
html+css3实现长方体效果
weixin_30722589的博客
07-25 979
网上大都是正方体的效果，由于做一个东西需要，写了一个HTML+css3实现的长方体，有需要的也可以看看。 2017-07-25 21:30:23 效果图如下: html代码 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ...
CSS3实现3D球体运动
qq_41402809的博客
08-10 2617
@CSS3实现3D球体运动 实现思路 本案例主要实现两个功能： 鼠标拖拽使球体旋转； 鼠标轮滚动进入球体内部； 核心：球体形成思路 html <div class="stage"> <div class="unit"> //<div class=".ball"> 组成球体的一个个小长方形 </div> </div&...
css3制作八棱锥_svg、canvas、css3d实现数据可视化（伪3D效果）
weixin_31368213的博客
01-16 1223
前言：这次如算上处定面一这我作问汇u应色会进灯样近项目用到了一些自定义的数据可视化组件，我把我做的部分抽出来几个典型功一新说讲为其年次供。发了架人据模制理个通似会业文告个了者到作会也转动和矿大一效做个汇总。分为如下：星球环绕旋转享。发概程间告屏会。一控近到都从述序也问图 -- 方法一： svg：animateMotion+ animateTransform 方法二：css3支器事的后功发久这含层请...
【鸿蒙实战开发】利用CSS动画实现HarmonyOS动效（一）
HarmonyOS007的博客
08-07 1026
CSS是描述HML页面结构的样式语言。所有组件均存在系统默认样式，也可在页面CSS样式文件中对组件、页面自定义不同的样式。请参考​通用样式了解兼容JS的类Web开发范式支持的组件样式。
CSS3 3D转换模块-正方体，长方体
ilinda的博客
09-01 594
正方体1— 这个实现过程中，先平移后旋转，坐标轴不变 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li&...
css中如何写出长方体,CSS3 可伸缩3D长方体
weixin_33428613的博客
08-03 1120
CSS语言：CSSSCSS确定html,body {height: 100%;}body {font-size: 200px;background: #000;overflow: hidden;perspective: 3em;}.container {position: absolute;top: 0;left: 0;width: 100%;height: 100%;transform-styl...
3D效果-长方形
m0_55041880的博客
07-21 178
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
运用CSS写出旋转的立方体
m0_63594852的博客
05-14 1100
友友们!!纯纯用css就可以写出会自己旋转的3D立方体! 首先需要了解几个属性： transform 变形 translate 位移 rotate 旋转 perspective 透视 transform-style:preserve-3d 开启立体呈现 定义动画： @keyframes name{ from{ transform:rotate(0deg) } to{ transform:rotate(360deg) } } 调用动画： animation:name 1s l
css 实现3D立方体效果
王海虎的博客
12-18 458
前两天需要用到一个3D立方体的效果，知道c3可以写但一直都没试过，然后自己写了一下效果还不错，想着跟大家分享一下 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content=&qu
CSS学习记录9/3D的正方体的两种编写方式/3D长方体的编写方式/3D动画/3D播放器
qq_49080239的博客
07-02 337
什么是2D什么是3D？ 2D就是一个平面，只是宽度和高度，没有厚度。 3D就是一个立体，有宽度有高度，还有厚度。 默认情况下所有的元素都是呈2D展现的。如何让某个元素呈3D展现？ 和透视一样，只需给该元素的父元素添加一个transform-style属性，然后设置为preserve-3d即可。正方体第一种方案： 正方体第二种方案：前后上下内容不会翻转。 如何做一个长方体？ 先做一个正方体，给需要拉宽的面设置scale参数。 例：scale(1.5,1)3D动画： 效果： 3D播放器： 结果：动画在主页视
vue css动画效果 旋转_HTML+CSS基础入门开发，小方块来回旋转动画特效
weixin_42469083的博客
01-31 661
大家好，本篇文章分享小方块来回旋转动画特效，欢迎参考和指正。效果图：小方块来回旋转动画特效HTML代码：CSS代码： .tui-demo-2 { width: 100px; height: 100px; margin: 50px auto; background: #FFB800; animation: tui-demo-2 2.0s infinite; } @keyframes tui-demo...
css旋转立方体教程,通过CSS3实现旋转立方体的方法
weixin_35809747的博客
08-04 570
通过CSS3实现旋转立方体的方法发布时间：2020-08-27 14:18:45来源：亿速云阅读：78作者：小新这篇文章将为大家详细讲解有关通过CSS3实现旋转立方体的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。主要通过CSS3中transform属性实现，首先给元素设置成3D元素，然后定义六个面的样式再通过transform属性对其进行旋转即可实现旋转立...
CSS transform 属性 实现矩形旋转
xm_w_xm的博客
08-18 923
定义和用法 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 为了更好地理解 transform 属性，请查看这个演示。 默认值： none 继承性： no 版本： CSS3 JavaScript 语法： object.style.transform="rotate(7deg)" 语法 transform: none|transform-functions; 值 描述 n...
使用CSS3实现3D旋转球体动画效果
然而，该文件名称暗示，它可能包含实现3D旋转球体所需的部分CSS代码或结构布局。在实际应用中，开发者将需要利用类似命名的CSS类或ID来编写具体样式，从而构造出旋转的球体效果。 总结而言，纯CSS3制作3D旋转球体...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值