用css3 3d效果做一个立体盒子

最新推荐文章于 2023-12-21 10:17:30 发布
最新推荐文章于 2023-12-21 10:17:30 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： 前端 文章标签： html5 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cat_LIKE_Mouse/article/details/119254475
版权

想要做立方体的盒子 需要了解几个知识点

旋转 transform：rotate

基点的设置 transform-origin

3d设置 transform-style：preserve-3d

移动：transform：translat

定位position

透明度 opacity

首先先把所有的架子搭出来：（一开始需要将盒子转一下，要不然看不出3d效果）

 效果

 第一步将准备的第一个盒子z轴移动400像素

效果

 第二个盒子需要绕上边的基线旋转90度

 

第三个盒子

效果

 第四个盒子

 第五个盒子

 

只是其中的一个比较简便的方法 

另外一种方法就是利用旋转和位移做；大家也可以尝试一下

大概的流程是 1盒子和5 盒子一个向z轴移动正200，一个负两百

剩下的就是旋转然后位移

jasmine 莉
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html简单盒子代码,CSS3 3D盒子超简单制作
weixin_34334554的博客
06-09 2260
这是我第一次在这里写文章，如果写得不好的话，请大家多多包涵一下。在XX网学完CSS3之后，然后我懂了一个道理，XX网评论区域存在一个小明梗，这个梗是这样的：1+1=2, 2+2=4，问小明今年多少岁 = 。= 原因是XX网教的基础是非常的基础，一到实战就GG了。看完CCS3课程后，自己尝试手写一下3D盒子的切换，虽然不是很炫。但是为了来练练手，顺便检查一下自己的学习成果，写了一个超鸡简单的鼠标...
css3立体3d数字时钟滚动特效
07-24
"css3立体3d数字时钟滚动特效"就是一个很好的例子，它利用了CSS3的先进特性，将时间的流逝以一种新颖、立体的方式呈现出来。这个特效结合了splitting技术和3D变换，为用户带来动态且富有深度的体验。 首先，让我们...
CSS3实现3D透明立体盒子
GaHoOo的博客
10-19 2358
想要利用CSS3实现透明3D立体盒子 就要清楚立方体是由六个面组成，分上下左右和前后，考虑这些可以帮助我们更好的融入CSS3的代码 因此我设置了6个div，作为立方体的6个面 因为定位的原因，一开始所有的盒子都是面对着屏幕这面的，因此要赋予每个面不一样的值，即不一样的位置 它才能展现出来。 .trangel div:nth-of-type(1){ left: 0; top:-10...
用html5做立体盒子,css3制作3d盒子
weixin_42405503的博客
06-07 1232
本文首发于我的博客，这是我的github，欢迎star。一直想做一个立体的盒子，前段时间刚好看见掘金上有位朋友发了篇关于3d盒子的文章，看了决定自己做一下，再写一些和盒子互动的操作。这里是要做的效果，应该要翻过墙才可以访问，这里是github地址，可以直接查看代码，上边还有别的有趣的demo，欢迎来访。首先看下怎么做一个静止的盒子，用到了css3的transform。将盒子六个面放在一个div里，...
css3实践—创建3D立方体
weixin_34245082的博客
08-30 155
　　要想实现3D的效果，其实非常简单，只需指定一个元素为容器并设置transform-style：preserve-3d，那么它的后代元素便会有3D效果。不过有很多需要注意的地方，这里把我学习的方法，过程分享给大家。再讲知识点之前，还是先弄清楚3D的坐标系吧，从网上搜了一张经典坐标系图，供大家回顾一下。 1、3D试图 　　transform-style：flat(默认，二维效果) / pr...
CSS3立体盒子
weixin_44325613的博客
12-25 172
<style> body { /* 透视 */ perspective: 1000px; } section { width: 200px; height: 200px; position: relative; margin: 300px auto; margin-left: ..
用css3做3d立方体,CSS3实现3D立方体
weixin_30821881的博客
08-03 235
利用CSS3 animation及transform实现一个404立方体盒子点击查看效果Paste_Image.png3D立方体*{margin: 0;padding: 0;}body{background: #000;}.box{width: 200px;height: 200px;margin: 200px auto 0;position: relative;}.box img{width: ...
css代码写3D盒子动画
weixin_46249441的博客
12-15 1234
完整代码见下： html： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>HTML+CSS 3D盒子</title> <link rel="st..
css3设计动态立体盒子,【CSS3练习】3D盒子制作
weixin_29243279的博客
08-03 791
先发个3D盒子最终效果图制作步骤1：创建基本结构分布把6个面定义到3×3的画布上，1和4暂且是重叠的。html结构比较简单：123456CSS部分：*{margin:0;padding:0;}.box{margin:50px auto; 300px;height: 300px; border:1px solid #ccc;position: relative;}.layer{background-...
CSS-3D盒子
02-18
**CSS-3D盒子详解** ...总的来说，CSS3D盒子是通过CSS3的3D变换特性，为传统二维网页元素添加了第三维度，使得网页设计具有更丰富的视觉表现和交互体验。熟练掌握这些技巧，可以让开发者创造出引人入胜的3D网页效果。
CSS3 展架 商品货架 相册展示框.rar
07-10
CSS3 展架 商品货架 相册展示框，货架效果，这个效果你看像什么吧，最开始做的是一个相册架子，用来放相册的展台，一共有三种，可看到每层架子的三维角度都会自动变换，本代码中使用了多张图片，主要是网页的背景和展台中的相册是调用的图片来显示，本源码重点在展台的三维绘制和3D透视效果的控制，其中一款效果如下图所示。
CSS3学习笔记之立体盒子
03-16
CSS3学习笔记之立体盒子，供大家一起共同分享学习。
css3d旋转盒子实例
11-07
3D转换是CSS3的一个重要特性，它为Web开发者提供了在网页上创建动态、立体视觉效果的能力。下面，我们将会详细讲解相关知识点，并提供实践代码供学习参考。 首先，让我们了解HTML5。HTML5是超文本标记语言的最新...
利用CSS3制作简单的3d半透明立方体图片展示
09-24
在本教程中，我们将深入探讨如何使用CSS3创建一个3D半透明立方体来展示图片。这个技术在网页设计中可以用于创新的图像展示或交互式元素，为用户带来更丰富的视觉体验。以下是对实现这一效果的关键知识点的详细解释：...
jQuery自定义图片3D盒子旋转代码
06-24
本项目“jQuery自定义图片3D盒子旋转代码”是基于jQuery和Vue.js实现的一个创新的图像展示解决方案，旨在为用户提供一种立体、动态的视觉体验。 首先，我们来探讨jQuery在其中的角色。jQuery提供了简洁的API，使得...
html惊喜盒子效果,网页设计之css炫酷3d盒子效果
weixin_32807673的博客
06-10 779
EasyDemo*CSS概述及样式表知识点个人总结(一&&二)一、CSSCSS概述1.1.1CSS的作用1.1.2什么是CSS*CSS:层叠样式表，简称样式表*用于html文档中元素的样式定义-实现了将内容与表现分离-提高代码的可重用性和可维护性1.2使用CSS样式表1.2.1使用CSS样式表*内联方式-样式定义在单个的html元素中*内部样式表-样...vue-cli build...
CSS+JS实现3D盒子
暖风的博客_CSDN博客
03-24 382
1.首先必须对3d坐标足够熟悉，如下图 初始页面在xy所在页面，默认3d转换中心在图的中点。 2.我们需要构成6个页面，形成一个正方形，代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="shortcut icon" href="fk.PNG"> <title>css3D盒子</titl..
纯css div制作动态的3d盒子
qq_43730595的博客
01-09 306
纯css div制作动态的3d盒子
CSS(五) -- 动效实现(立体盒子旋转-四方体+正六边)
最新发布
Twelve_Y的博客
12-21 447
【代码】CSS(四) -- 动效实现(立体盒子旋转-四方体+正六边)
写一个CSS把盒子放倒有3D效果
06-10
好的，这里是一个简单的例子，可以让盒子绕着Y轴旋转，产生3D效果： ```html <div class="box"></div> ``` ```css .box { width: 200px; height: 200px; background-color: #ccc; transform: perspective(800px) rotateY(45deg); transition: transform 0.5s ease-in-out; } .box:hover { transform: perspective(800px) rotateY(-45deg); } ``` 上述代码中，我们使用了perspective属性来设置观察者与物体之间的距离为800px，然后使用rotateY函数来实现盒子绕着Y轴旋转45度。当鼠标滑过盒子时，我们改变了rotateY的值，让盒子反向旋转。通过transition属性，我们还为盒子添加了动画效果，让它的旋转更加流畅。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值