3D立体模型盒子旋转特效

这是一个3D的立方体盒子给盒子添加动画属性使其可以转动。
原理：原理其实很简单我们看到的一个立方体其实就是靠六个平面搭建起来的

一、立方体的创建

首先要给中心添加一个transform-style: preserve-3d;使其形成一个3D空间再稍微转动一些角度使我们能够更直观的看

六张正方形块堆叠在正中心位置往前走边长的一般就形成了前面这一面，往后走边长的一半就是它的对面，往左移动一半然后旋转个90deg，就是左边的一面，依次类推，组成一个立方体(未配图，可参考代码自行研究)

二、立方体的实现

立方体的实现与旋转相册的方法大体相同，但有两种方法，其一是：使四个侧面向外移动自身宽高的一半，再旋转90°；第二种方法是：四个侧面向不同方向移动自身宽度的距离，后旋转90°。立方体初始状态搭建好之后，使其循环旋转

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>*{margin: 0;padding: 0;}.box{width: 400px;height: 400px;position: fixed;left:0;right:0;top:0;bottom:0;margin:auto;transform-style: preserve-3d;transform:rotateX(20deg) rotateY(20deg);animation: donghua 5s linear  infinite;}/* .box:hover{animation-play-state: paused; //可以自行添加伪类选择器} */.box div{width: 400px;height: 400px;position: absolute;left: 0;top: 0;font-weight: bolder;font-size: 200px;text-align: center;line-height: 400px;color: black;backface-visibility: hidden;}.box img {width: 100%;height: 100%;}.box1{opacity: 0.8;background: pink;transform: translateX(200px) rotateY(90deg);}.box2{opacity: 0.8;background: orange;transform: translateX(-200px) rotateY(-90deg);}.box3{opacity: 0.8;background: greenyellow;transform: translateY(-200px) rotateX(90deg);}.box4{opacity: 0.8;background: skyblue;transform: translateY(200px) rotateX(-90deg);}.box5{opacity: 0.8;background: wheat;transform: translateZ(200px);}.box6{opacity: 0.8;background: red;transform: translateZ(-200px) rotateX(180deg);}@keyframes donghua{0%{transform:rotateX(0deg) rotateY(0deg);}25%{transform: rotateX(90deg) rotateY(90deg);}50%{transform: rotateX(180deg) rotateY(180deg);}75%{transform: rotateX(270deg) rotateY(270deg);}100%{transform:rotateX(360deg) rotateY(360deg);}}
</style>
<body><div class="box"><div class="box1"><img src="./新建文件夹/html/images/1111.jpg" alt=""></div><div class="box2"><img src="./新建文件夹/html/images/2222.jpg" alt=""></div><div class="box3"><img src="./新建文件夹/html/images/3333.jpg" alt=""></div><div class="box4"><img src="./新建文件夹/html/images/4444.jpg" alt=""></div><div class="box5"><img src="./新建文件夹/html/images/5555.jpg" alt=""></div><div class="box6"><img src="./新建文件夹/html/images/6666.jpg" alt=""></div></div></body>
</html>

3D立体模型盒子旋转特效相关推荐

QGIS 实现 3D 立体模型和地图
DEM 数据下载还是说一下数据下载吧. 美国 DEM 数据下载(NOAA): NOAA Data Access Viewer.https://coast.noaa.gov/dataviewer/#/ ...
HTML做3D立体特效,html5 3D立体粒子波浪动画特效代码
特效描述:html5 3D立体粒子波浪动画.3D 粒子动画特效代码结构 1. 引入JS 2. HTML代码 /// Scene const sceneSettings = { width: () ...
六边形3d立体缩放动画js特效
下载地址一款六边形3d立体缩放动画特效,该特效模拟了六边形3d柱状上下浮动的动画效果,鼠标控制可缩放图像,简单实用 dd:
css3制作3D立体模型
代码跟注释都在里面了!想知道是什么效果不妨自己试试! <!DOCTYPE html> <html><head><meta charset="UTF- ...
unity怎么在UI面板上显示出3D立体模型
unity怎么在Ui面板上显示出3D模型! 1.创建Render texture 2.创建RawImage 3.创建摄像机注意点:1,摄像机和RawImage上面要将Render texture拖上 ...
laya 3d 中模型创建/旋转产生的问题
1.触发条件(同时满足): (1)按时间顺序创建C0,C1,创建方式不限(unity导入或者mesh代码方式),模型来源不限,来源为刚体(isK = true): (2)C0为刚体(isK = tru ...
抖音上超火的3D立体动态相册表白特效（29）
制作成下面这种效果: 鼠标经过时会展开十分好看!换成你和情人的图片,可以放十几张不同的图片也可以只放一种图片! 文件放置部分: css代码部分: html{background:url(../img/ ...
多款3d 立体按钮点击特效
体验链接: https://znasr.gitee.io/mywebsite <template><div class="buttonAni&qu ...
html 3D立体多形态旋转音乐相册 | 2022都结束了，还不快给女神制作一个特殊的纪念相册

3D立体模型盒子旋转特效

一、立方体的创建

首先要给中心添加一个transform-style: preserve-3d;使其形成一个3D空间再稍微转动一些角度使我们能够更直观的看

六张正方形块堆叠在正中心位置往前走边长的一般就形成了前面这一面，往后走边长的一半就是它的对面，往左移动一半然后旋转个90deg，就是左边的一面，依次类推，组成一个立方体(未配图，可参考代码自行研究)

二、立方体的实现

3D立体模型盒子旋转特效相关推荐

最新文章

热门文章

3D立体模型盒子旋转特效

一、立方体的创建

首先要给中心添加一个transform-style: preserve-3d;使其形成一个3D空间 再稍微转动一些角度 使我们能够更直观的看

六张正方形块堆叠在正中心位置 往前走边长的一般就形成了前面这一面，往后走边长的一半就是它的对面，往左移动一半然后旋转个90deg，就是左边的一面，依次类推，组成一个立方体(未配图，可参考代码自行研究)

二、立方体的实现

3D立体模型盒子旋转特效相关推荐

最新文章

热门文章

首先要给中心添加一个transform-style: preserve-3d;使其形成一个3D空间再稍微转动一些角度使我们能够更直观的看

六张正方形块堆叠在正中心位置往前走边长的一般就形成了前面这一面，往后走边长的一半就是它的对面，往左移动一半然后旋转个90deg，就是左边的一面，依次类推，组成一个立方体(未配图，可参考代码自行研究)