电子商务网站模版,江苏做网站公司排名,广告制作自学入门的步骤,快站免费网站建设哪家好先来看运行后出来的效果 它是在不停运行的一个立方体 先来看html部分的代码 div classrect-wrap !--舞台元素#xff0c;设置perspective#xff0c;让其子元素获得透视效果。--div classcontainer !-- 容器#…先来看运行后出来的效果 它是在不停运行的一个立方体 先来看html部分的代码 div classrect-wrap !--舞台元素设置perspective让其子元素获得透视效果。-- div classcontainer !-- 容器设置transform-style: preserve-3d让其子元素在3D空间呈现-- div classtop slide/div !--立方体的六个面-- div classbottom slide/div div classleft slide/div div classright slide/div div classfront slide/div div classback slide/div /div /div 先建出来六个div然后再依次给它们设置样式 再来看它们的样式表 style typetext/css .rect-wrap { position: relative; perspective: 1600px; } .container { width: 800px; height: 800px; transform-style: preserve-3d; transform-origin: 50% 50% 200px; /*设置3d空间的原点在平面中心再向Z轴移动200px的位置*/ } .slide { width: 400px; height: 400px; position: absolute; //定位 } .top { left: 200px; top: -200px; transform: rotateX(-90deg); transform-origin: bottom; background-color:#C69 } .bottom { left: 200px; bottom: -200px; transform: rotateX(90deg); transform-origin: top; background-color:#6FF } .left { left: -200px; top: 200px; transform: rotateY(90deg); transform-origin: right; background-color:#9F0 } .right { left: 600px; top: 200px; transform: rotateY(-90deg); transform-origin: left; background-color:#33F } .front { left: 200px; top: 200px; transform: translateZ(400px); background-color:#366 /*立方体前面正对着屏幕所以不用旋转只需向Z轴前移动距离*/ } .back { left: 200px; top: 200px; transform: translateZ(0); background-color:#09F /*立方体后面正对着屏幕所以不用旋转只需向Z轴后移动距离*/ } keyframes rotate-frame { 0% { transform: rotateX(0deg) rotateY(0deg); } 10% { transform: rotateX(0deg) rotateY(180deg); } 20% { transform: rotateX(-180deg) rotateY(180deg); } 30% { transform: rotateX(-360deg) rotateY(180deg); } 40% { transform: rotateX(-360deg) rotateY(360deg); } 50% { transform: rotateX(-180deg) rotateY(360deg); } 60% { transform: rotateX(90deg) rotateY(180deg); } 70% { transform: rotateX(0) rotateY(180deg); } 80% { transform: rotateX(90deg) rotateY(90deg); } 90% { transform: rotateX(90deg) rotateY(0); } 100% { transform: rotateX(0) rotateY(0); } } .container{ animation: rotate-frame 30s linear infinite; } /style 代码只有这些便可以实现3D旋转了 也可以变成图片的可以这样做 在每个div里都加上图片然后给每个图片设置成统一名字再给他们统一样式设置高和宽就好了 可以粘贴复制代码都来试试吧