HTML特效，旋转的正方体

如题，以下代码来自互联网，运行效果和代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>旋转带图正方体</title><style>/*最外层容器样式*/.wrap {width: 100px;height: 100px;margin: 150px;position: relative;/*正方体的位置*/top: 150px;left: 150px;}/*得到立方体效果*/.cube {width: 50px;height: 50px;margin: 0 auto;transform-style: preserve-3d;/*设置动画播放样式:动画对象 播放速度 时间 播放次数*/animation: rotate linear 20s infinite;}/*动画旋转的方式*//*得到动画效果*/@-moz-keyframes rotate { /*firefox*/from {transform: rotateX(0deg) rotateY(0deg);}to {transform: rotateX(360deg) rotateY(360deg);}}@-webkit-keyframes rotate { /*sofari chrome*/from {transform: rotateX(0deg) rotateY(0deg);}to {transform: rotateX(360deg) rotateY(360deg);}}@-o-keyframes rotate { /*opera*/from {transform: rotateX(0deg) rotateY(0deg);}to {transform: rotateX(360deg) rotateY(360deg);}}/*每张图片的样式*/.cube div {position: absolute;width: 200px;height: 200px;opacity: 0.8;/*过渡效果*/transition: all .4s;}/*定义所有图片样式*/.pic {width: 200px;height: 200px;}.cube .out_front {transform: rotateY(0deg) translateZ(100px);}.cube .out_back {transform: translateZ(-100px) rotateY(180deg);}.cube .out_left {transform: rotateY(-90deg) translateZ(100px);}.cube .out_right {transform: rotateY(90deg) translateZ(100px);}.cube .out_top {transform: rotateX(90deg) translateZ(100px);}.cube .out_bottom {transform: rotateX(-90deg) translateZ(100px);}/*定义小正方体样式*/.cube span {display: block;width: 100px;height: 100px;position: absolute;top: 50px;left: 50px;}.cube .in_pic {width: 100px;height: 100px;}.cube .in_front {transform: rotateY(0deg) translateZ(50px);}.cube .in_back {transform: translateZ(-50px) rotateY(180deg);}.cube .in_left {transform: rotateY(-90deg) translateZ(50px);}.cube .in_right {transform: rotateY(90deg) translateZ(50px);}.cube .in_top {transform: rotateX(90deg) translateZ(50px);}.cube .in_bottom {transform: rotateX(-90deg) translateZ(50px);}/*鼠标移入后样式*/.cube:hover .out_front {transform: rotateY(0deg) translateZ(200px);}.cube:hover .out_back {transform: translateZ(-200px) rotateY(180deg);}.cube:hover .out_left {transform: rotateY(-90deg) translateZ(200px);}.cube:hover .out_right {transform: rotateY(90deg) translateZ(200px);}.cube:hover .out_top {transform: rotateX(90deg) translateZ(200px);}.cube:hover .out_bottom {transform: rotateX(-90deg) translateZ(200px);}</style>
</head>
<body><div class="wrap"><!--部署内外层图片--><div class="cube"><!--前面图片 --><div class="out_front"><img src="https://images.cnblogs.com/cnblogs_com/yscec/1666121/o_2003100808361.jpg" class="pic" /></div><!--后面图片 --><div class="out_back"><img src="https://images.cnblogs.com/cnblogs_com/yscec/1666121/o_2003100809492.jpg" class="pic"/></div><!--左面图片 --><div class="out_left"><img src="https://images.cnblogs.com/cnblogs_com/yscec/1666121/o_2003100810444.jpg" class="pic"/></div><!--右面图片 --><div class="out_right"><img src="https://images.cnblogs.com/cnblogs_com/yscec/1666121/o_2003100812305.jpg" class="pic"/></div><!--上面图片 --><div class="out_top"><img src="https://images.cnblogs.com/cnblogs_com/yscec/1666121/o_2003100813136.jpg" class="pic"/></div><!--下面图片 --><div class="out_bottom"><img src="https://images.cnblogs.com/cnblogs_com/yscec/1666121/o_2003100813587.jpg" class="pic"/></div><!--小正方体 --><span class="in_front"><img src="https://images.cnblogs.com/cnblogs_com/yscec/1666121/o_2003100814378.jpg" class="in_pic"/></span><span class="in_back"><img src="https://images.cnblogs.com/cnblogs_com/yscec/1666121/o_2003100815219.jpg" class="in_pic"/></span><span class="in_left"><img src="https://images.cnblogs.com/cnblogs_com/yscec/1666121/o_20031008172710.jpg" class="in_pic"/></span><span class="in_right"><img src="https://images.cnblogs.com/cnblogs_com/yscec/1666121/o_20031008181011.jpg" class="in_pic"/></span><span class="in_top"><img src="https://images.cnblogs.com/cnblogs_com/yscec/1666121/o_20031008191812.jpg" class="in_pic"/></span><span class="in_bottom"><img src="https://images.cnblogs.com/cnblogs_com/yscec/1666121/o_20031008204613.jpg" class="in_pic"/></span></div></div></body>
</html>

（END）

HTML特效，旋转的正方体相关推荐

CSS 实现箭头、三角形、旋转的正方体
右箭头: width: 7px; height: 7px; border-top: 2px solid black; border-right: 2px solid black; transform: ...
教你用CSS3画一个透视、旋转的正方体
教你用CSS3画一个透视.旋转的正方体正方体六个面,无非就是,将每个面进行translateZ提升/降低边长的一半,然后再进行rotate X/rotate Y (n*90deg)的旋转即可. ht ...
用html和css做一个旋转的正方体
用html和css做一个旋转的正方体 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
html动画特效——旋转带图正方体
<div class="wrap"><div class="cube"><!--前面图 ...
网站特效-------旋转的图片
由于近期工作中和个人需要做些网站,原本没有接触过web开发的我,这段时间发现web开发原来这么奇妙! 现在贴出旋转图片的特效,供大家学习! <!DOCTYPE HTML PUBLIC " ...
ThreeJS 炫酷特效旋转多面体Web页 Demo 01《ThreeJS 炫酷特效制作》
本案例为一个 threejs 的特效网页,大小球体进行包裹,外球体为透明材质,但是进行了线框渲染,使其能够通过外球踢查看其内球体. 注:案例参考源于互联网,在此做代码解释,侵删本案例除 ThreeJ ...
【OpenGL学习笔记⑥】——3D变换【旋转的正方体实现地月系统旋转+平移+缩放】
✈️ 文章目录零. 成果预览图一.3D立方体的顶点数组二.纹理旋转三.纹理缩放四.画n个3D图形五.轨道的数学公式六.深度缓冲(Z 缓冲) 七.完整代码八.参考附录: 神器的正方体 ☁ ...
计算机图形学-旋转彩色正方体
功能:1:鼠标可拖拉正方体做任意旋转 2:键盘输入x ,X,y,Y,z,Z可使正方体绕指定方向旋转 #include <GL/glut.h> #include <cstdlib> ...
3D three.js（1）怎么写一个3D旋转的正方体
效果如图所示: 本篇暂未用到three.js,但是能学到一些基础的3D知识! 先记住xyz轴的展示和画法: rotate:左手法则___ 伸出左手,大拇指指向正轴方向,四个手指的指向即是旋转正向,但务 ...

HTML特效，旋转的正方体

HTML特效，旋转的正方体相关推荐

最新文章

热门文章