目的：HTM+CSS实现立方体图片旋转展示效果

环境：

系统：Win10
环境：

一、示例1。

话不多说直接上代码

<html><head><style>/*立方体效果*/.wrap {width: 120px;height: 200px;margin: 20px;position: fixed;top: 100px;left: 200px;display: table-cell;vertical-align: middle;text-align: center;z-index: 22;}.cube {width: 120px;height: 120px;margin: 0 auto;transform-style: preserve-3d;transform: rotateX(-30deg) rotateY(-80deg);animation: rotate linear 20s infinite;}@-webkit-keyframes rotate {from {transform: rotateX(0deg) rotateY(0deg);}to {transform: rotateX(360deg) rotateY(360deg);}}.cube div {position: absolute;width: 120px;height: 120px;opacity: 0.8;transition: all .4s;}.cube .out_front {transform: rotateY(0deg) translateZ(60px);}.cube .out_back {transform: translateZ(-60px) rotateY(180deg);}.cube .out_left {transform: rotateY(-90deg) translateZ(60px);}.cube .out_right {transform: rotateY(90deg) translateZ(60px);}.cube .out_top {transform: rotateX(90deg) translateZ(60px);}.cube .out_bottom {transform: rotateX(-90deg) translateZ(60px);}</style></head><body><div class="wrap"><div class="cube"><div class="out_front"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube01.bmp" class="pic"></div><div class="out_back"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube02.bmp" class="pic"></div><div class="out_left"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube03.bmp" class="pic"></div><div class="out_right"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube04.bmp" class="pic"></div><div class="out_top"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube05.bmp" class="pic"></div><div class="out_bottom"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube06.bmp" class="pic"></div></div></div></body>
</html>

效果图：

一、示例2，增大立方体。

话不多说直接上代码

<html><head><style>/*立方体效果*/.wrap {width: 800px;height: 600px;margin: 20px;position: fixed;top: 100px;left: 200px;display: table-cell;vertical-align: middle;text-align: center;z-index: 22;}.cube {width: 600px;height: 600px;margin: 0 auto;transform-style: preserve-3d;transform: rotateX(-30deg) rotateY(-80deg);animation: rotate linear 20s infinite;}@-webkit-keyframes rotate {from {transform: rotateX(0deg) rotateY(0deg);}to {transform: rotateX(360deg) rotateY(360deg);}}.cube div {position: absolute;width: 600px;height: 600px;opacity: 0.8;transition: all .4s;}.cube .out_front {transform: rotateY(0deg) translateZ(300px);}.cube .out_back {transform: rotateY(180deg) translateZ(-300px);}.cube .out_left {transform: rotateY(-90deg) translateZ(300px);}.cube .out_right {transform: rotateY(90deg) translateZ(300px);}.cube .out_top {transform: rotateX(90deg) translateZ(300px);}.cube .out_bottom {transform: rotateX(-90deg) translateZ(300px);}</style></head><body><div class="wrap"><div class="cube"><div class="out_front"><img src="http://pic.sc.chinaz.com/files/pic/pic9/201906/zzpic18408.jpg" class="pic" height="600" width="600" ></div><div class="out_back"><img src="http://pic.sc.chinaz.com/files/pic/pic9/201907/zzpic18997.jpg" class="pic" height="600" width="600" ></div><div class="out_left"><img src="http://pic.sc.chinaz.com/files/pic/pic9/201907/zzpic19237.jpg" class="pic" height="600" width="600" ></div><div class="out_right"><img src="http://pic.sc.chinaz.com/files/pic/pic9/201907/zzpic19021.jpg" class="pic" height="600" width="600" ></div><div class="out_top"><img src="http://pic.sc.chinaz.com/files/pic/pic9/201907/zzpic18835.jpg" class="pic" height="600" width="600"></div><div class="out_bottom"><img src="http://pic.sc.chinaz.com/files/pic/pic9/201906/zzpic18480.jpg" class="pic" height="600" width="600"></div></div></div></body>
</html>

效果图：

一、示例3。

话不多说直接上代码

<html><head><meta charset="utf-8" /><title>CSS3制作3D图片立方体旋转特效</title><style type="text/css">html{background:linear-gradient(#fc0 0%,#F80 80%);height: 100%;   }.wrap{width: 650px;height: 200px;margin: 150px 360px;position: relative;}.cube{width: 200px;height: 200px;margin: 0 auto;transform-style: preserve-3d;transform: rotateX(-30deg) rotateY(-80deg);-webkit-animation: rotate 20s infinite;animation-timing-function: linear;}@-webkit-keyframes rotate{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: bloack;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="./img/1.jpg"  class="pic"></div><!--后面图片 --><div class="out_back"><img src="./img/2.jpg"  class="pic"></div><!--左图片 --><div class="out_left"><img src="./img/3.jpg"  class="pic"></div><div class="out_right"><img src="./img/4.jpg" class="pic"></div><div class="out_top"><img src="./img/5.jpg"  class="pic"></div><div class="out_bottom"><img src="./img/6.jpg"  class="pic"></div><!--小正方体 --><span class="in_front"><img src="./img/7.jpg" class="in_pic" /></span><span class="in_back"><img src="./img/8.jpg" class="in_pic" /></span><span class="in_left"><img src="./img/9.jpg" class="in_pic" /></span><span class="in_right"><img src="./img/10.jpg" class="in_pic" /></span><span class="in_top"><img src="./img/11.jpg" class="in_pic" /></span><span class="in_bottom"><img src="./img/12.jpg" class="in_pic" /></span></div></div></body>
</html>

效果图：

更多延申参考：https://www.cnblogs.com/zyrblog/p/11142624.html

HTM+CSS实现立方体图片旋转展示效果相关推荐

css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果，CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...
JavaScript 图片切换展示效果
JavaScript 图片切换展示效果看到alibaba的一个图片切换效果,感觉不错,想拿来用用.但代码一大堆的,看着昏,还是自己来吧. 由于有了做图片滑动展示效果的经验,做这个就容易得多了. 先看 ...
html+css+js 实现图片轮播效果
html+css+js 实现图片轮播效果图片轮播效果: 会自动向左 || 向右切换图片能手动点击按钮切换图片多用于商品展览等等 --首先我们创建一个盒子进行展览,然后一个< ul> ...
JavaScript 图片滑动展示效果javascript
javascript 图片滑动展示效果更新版本:slideview 图片滑动(扩展/收缩)展示效果看到jquery实例:图片展示效果后,我也想拿来试试,但我不太喜欢用框架,所以自己做了个. 其中的 ...
php图片滑动的属性,使用css怎么实现图片的滑动效果？（示例）
本篇文章主要给大家介绍关于css实现图片的滑动效果示例,希望大家阅读完本篇后对css滑动效果的相关知识有所了解. 下面给大家举一个简单的css图片滑动效果示例(自下而上滑动): css怎么实现图片滑动 ...
jquery练习——简单的图片结果展示效果
今天看到google图片搜索结果页面,感觉简洁实用,于是用jquery粗略的模仿了一下再次感觉到jquery的强大和易用,基本思路初步实现了,再整合ajax和json,应该可以做一个简单的应用了 : ...
基于html5鼠标悬停图片动画展示效果
分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=" ...
css3动画图片旋转绕轴,css3图片旋转如何实现？css3实现图片旋转动画效果的方法...
在网页中,我们经常可以看到一张图片在旋转,这样的图片旋转是怎么来实现的呢?本篇文章就来为你介绍一下关于css3实现图片旋转动画效果的方法. 实现css3中图片的旋转可以使用可以使用 -webkit-a ...
html中如何使图片自动旋转90度,css怎么让图片旋转90度？
css怎么让图片旋转90度?下面本篇文章给大家介绍一下使用CSS让图片旋转90度的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css怎么让图片旋转90度? 在CSS中,可以 ...

HTM+CSS实现立方体图片旋转展示效果

目的：HTM+CSS实现立方体图片旋转展示效果

环境：

一、示例1。

话不多说直接上代码

一、示例2，增大立方体。

话不多说直接上代码

一、示例3。

话不多说直接上代码

HTM+CSS实现立方体图片旋转展示效果相关推荐

最新文章

热门文章