实现3D立方体旋转（代码）

3D讲解链接：
不懂请看下方链接结构代码：
https://blog.csdn.net/l1936441554/article/details/99080122

结构代码分析：
设置六个 div 标签，分别命名为正方体的六个面：

样式代码：
*{
box-sizing: border-box;
}

html{
height: 100%;
}

body{
margin: 0;
height: 100%;
background-image: url(’…/7.12/images/44.jpg’);
background-size: 100% 100%;
background-position: center center;
position: relative;
/* 添加景深效果 */
perspective: 1000px;
}

main{
width: 100px;
height: 100px;
/* outline 轮廓线 dashed 虚线 /
/ outline: 2px dashed red; /
/ 使用绝对定位进行元素居中 /
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/ 转换样式：控制自己内部标签的转换样式 */
transform-style:preserve-3d;

}

.surface{
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
/* 透明度 /
opacity: 0.6;
background-position: center center;
background-size: 100% 100%;
/ 元素阴影 /
box-shadow: 0 0 50px #fff;
/ border-radius: 50%; */
}

/* 在浏览器环境中，每一个元素都有自己的独立的坐标系
元素任何变形，都是所在坐标系的变形，而不是元素本身 */

.top{
background-image: url(’…/7.12/images/66.jpg’);
/* 想象旋转轴指向自己，顺时针为正值 /
transform: rotateX(90deg) translateZ(50px);
}
.bottom{
background-image: url(’…/7.12/images/88.jpg’);
transform:rotateX(-90deg) translateZ(50px);
}
.left{
background-image: url(’…/7.12/images/bj5.jpg’);
transform: rotateY(-90deg) translateZ(50px);
}
.right{
background-image: url(’…/7.12/images/bj6.jfif’);
transform: rotateY(90deg) translateZ(50px);
}
.front{
background-image: url(’…/7.12/images/bj7.jpg’);
/ 使用平移进行位置控制 */
transform: translateZ(50px) rotateX(180deg);
}
.back{
background-image: url(’…/7.12/images/bj8.jfif’);
transform: translateZ(-50px) rotateX(180deg);
}

.rotota{
animation: rotota 6s linear infinite;
animation-timing-function: cubic-bezier(1,1,1,1);
}

@keyframes rotota{
from{
transform:rotateY(0) rotateX(0)
}
to{
transform: rotateY(720deg) rotateX(360deg)
}
}

最终效果展示：

实现3D立方体旋转（代码）相关推荐

html鼠标互动旋转立方体,css3 transform及原生js实现鼠标拖动3D立方体旋转的示例介绍...
本文通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3D立方体的拖动旋转,并将旋转角度实时的反应至界面上显示. 实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴 ...
3d立方体旋转相册（转载）
抖音上要到的效果第一步:新建txt文件第二步:把以下代码复制到txt文件中,并保存 <!DOCTYPE html> <html><head><meta c ...
HTML5——3D立方体旋转动画
效果图: 代码如下: <!DOCTYPE html> <html> <head><meta charset="UTF-8">< ...
图片3d立方体旋转html代码,超酷3D立方体空间旋转图片画廊特效
这是一款效果非常炫酷的CSS3 3D立方体空间旋转图片画廊特效.该特效实际是一个3D立方体,在其内部显示图片.在点击立方体每一面的图片时,这张图片就会放大到屏幕的中间,效果非常的酷. 因为IE浏览器不 ...
css实现3D立方体旋转特效
先来看运行后出来的效果它是在不停运行的一个立方体先来看html部分的代码 <div class="rect-wrap"> <!--舞台元素,设置perspec ...
HTML5特效~3D立方体旋转
先欣赏一下该特效的最终效果本文源码参考自http://www.cnblogs.com/ECJTUACM-873284962/进行一点点优化,下面是对此特效原理上的的剖析. 该特效是基于Css3的一些 ...
3D立方体旋转相册特效
3D相册,使用鼠标触碰图片,能看到3D旋转放大效果内叠加立方体特效.本相册使用了HTML5的画布技术,下载打开 guyu.html 需要谷歌浏览器或火狐浏览器等现代浏览器才能正常观看效果更佳! 文件: ...
前端提高篇（五十七）练习9：3d立方体旋转
6个面上标有数字1-6,数字和立方体各面的对应关系是: 前1 上2 后3 下4 左5 右6 .wrapper {perspective: 600px; } .box {transform-style: ...
Web前端：HTML+CSS+JS实现美女照片3D立方体旋转
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有个 ...

实现3D立方体旋转（代码）

实现3D立方体旋转（代码）相关推荐

最新文章

热门文章