3D立体方块旋转图册
代码可直接复制使用看效果
这个文章参考了
Lazy.Cat的文章:https://www.cnblogs.com/Lazy-Cat/p/9750244.html,大家也可以去看看，他讲的还是比较详细的。
我也觉得先来效果比较吸引人啊
这里就先记录一些比较关键的知识点,方便大家理解
1.transform:transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。我们使用其rotateX,rotateY，translateZ来进行转动
2.transition：用于设置过渡属性
transition: all .4s;//所有过程完成时间为.4s
3.animation使用简写属性，将动画与 div 元素绑定
4.keyframes:从xx到xx状态
@keyframes animationname {keyframes-selector {css-styles;}}
@keyframes 动画名 { from{
初始状态
}to{
末态
}
}
我们来看看其是怎么构成一个正方形的
/*外层正方形*/
.set .out_front {
/*绕Y轴转动0度，向屏幕外偏移，离观察者近100px*/
transform: rotateY(0deg) translateZ(100px);
}
.set .out_back {
/*绕Y轴转动0度,向屏幕内移动，离观察者远离100px*/
transform: rotateY(0deg) translateZ(-100px) ;
} .set .out_left {
/*向屏幕外移动，离观察者远离100px，与正前方图片重叠，再绕Y轴转动-90度,形成左面*/
transform: rotateY(-90deg) translateZ(100px);
}
/*向屏幕外移动，离观察者远离100px，与正前方图片重叠，再绕Y轴转动90度,形成右面*/
.set .out_right {
transform: rotateY(90deg) translateZ(100px);
}
/*向屏幕外移动，离观察者远离100px，与正前方图片重叠，再绕X轴转动90度,形成顶面*/
.set .out_top {
transform: rotateX(90deg) translateZ(100px);
}
/*向屏幕外移动，离观察者远离100px，与正前方图片重叠，再绕X轴转动-90度,形成底面*/
.set .out_bottom {
transform: rotateX(-90deg) translateZ(100px);
}
如果想要看单个图片的转动，可以到w3school上去体验一下，下面附上该部分链接
http://www.w3school.com.cn/cssref/pr_transform.asp
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D旋转方块画册</title>
<style type="text/css">
/*外层容器样式*/
.wrap{
margin: 220px;
position: relative;
}
/*立方体效果*/
.set{
width: 50px;
height: 50px;
margin: 0 auto;
transform-style: preserve-3d;
/*设置动画播放样式:动画对象rotate 播放速度曲线从头到尾相同 时间20s 播放次数无限次*/
animation: rotate linear 20s infinite;
}
/*动画的旋转方式,先设定总体的*/
/*兼容*/
/*firefox*/
@-moz-keyframes rotate{
from{
transform: rotateX(0deg) rotateY(0deg);
}to{
transform: rotateX(360deg) rotateY(360deg);
}
}
/*sofari chrome*/
@-webkit-keyframes rotate {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
/*opera*/
@-o-keyframes rotate {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
/*设置单个图片的样式*/
.set div{
position: absolute;
width: 200px;
height: 200px;
opacity: 0.8;
/*持续时间为4s*/
transition: all .4s;
}
.pic {
width: 200px;
height: 200px;
}
.set .out_front {
/*绕Y轴转动0度，向屏幕外偏移，离观察者近100px*/
transform: rotateY(0deg) translateZ(100px);
}
.set .out_back {
/*绕Y轴转动0度,向屏幕内移动，离观察者远离100px*/
transform: rotateY(0deg) translateZ(-100px) ;
} .set .out_left {
/*向屏幕外移动，离观察者远离100px，与正前方图片重叠，再绕Y轴转动-90度,形成左面*/
transform: rotateY(-90deg) translateZ(100px);
}
/*向屏幕外移动，离观察者远离100px，与正前方图片重叠，再绕Y轴转动90度,形成右面*/
.set .out_right {
transform: rotateY(90deg) translateZ(100px);
}
/*向屏幕外移动，离观察者远离100px，与正前方图片重叠，再绕X轴转动90度,形成顶面*/
.set .out_top {
transform: rotateX(90deg) translateZ(100px);
}
/*向屏幕外移动，离观察者远离100px，与正前方图片重叠，再绕X轴转动-90度,形成底面*/
.set .out_bottom {
transform: rotateX(-90deg) translateZ(100px);
}
/*定义小正方体样式*/
.set span {
display: block;
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
} .set .s_pic {
width: 100px;
height: 100px;
} .set .in_front {
transform: rotateY(0deg) translateZ(50px);
} .set .in_back {
transform: translateZ(-50px) rotateY(180deg);
} .set .in_left {
transform: rotateY(-90deg) translateZ(50px);
} .set .in_right {
transform: rotateY(90deg) translateZ(50px);
} .set .in_top {
transform: rotateX(90deg) translateZ(50px);
} .set .in_bottom {
transform: rotateX(-90deg) translateZ(50px);
} /*鼠标移入后样式*/
/**/
.set:hover .out_front {
transform: rotateY(0deg) translateZ(200px);
} .set:hover .out_back {
transform: translateZ(-200px) rotateY(0deg);
} .set:hover .out_left {
transform: rotateY(-90deg) translateZ(200px);
} .set:hover .out_right {
transform: rotateY(90deg) translateZ(200px);
} .set:hover .out_top {
transform: rotateX(90deg) translateZ(200px);
} .set:hover .out_bottom {
transform: rotateX(-90deg) translateZ(200px);
} </style>
</head>
<body>
<!--创造一个独立的空间给我们的方块-->
<div class="wrap">
<!--建立一个div，设置共同的动画样式，统一协调-->
<div class="set">
<!--设置外层的方块的六个面-->
<!--前-->
<div class="out_front"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b79f246.jpg"></div>
<!--后-->
<div class="out_back"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b79f613.jpg"></div>
<!--左-->
<div class="out_left"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b7c1ae5.jpg"></div>
<!--右-->
<div class="out_right"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b7c19c8.jpg"></div>
<!--上-->
<div class="out_top"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b7c1b1f.jpg"></div>
<!--下-->
<div class="out_bottom"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b7c1b1f.jpg"></div>
<!--设置内层的方块的六个面,这里包裹img标签使用span是为了之后设置样式时便于区分-->
<!--前-->
<span class="in_front"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e943c912e.jpg"></span>
<!--后-->
<span class="in_back"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e943e4a11.jpg"></span>
<!--左-->
<span class="in_left"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e943e5482.jpg"></span>
<!--右-->
<span class="in_right"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e94411992.jpg"></span>
<!--上-->
<span class="in_top"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e94412ee7.jpg"></span>
<!--下-->
<span class="in_bottom"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e9441387d.jpg"></span> </div>
</div>
</body>
</html>
这个代码是重新更新了一下的，因为我这里用的图片在测试时是好好的，放到博客上来就大小不一，我就改了一下图片的大小
学习了之后还可以根据这些原理设计出其他有趣的东西
3D立体方块旋转图册的更多相关文章
- jquery环形3D立体旋转特效
jquery环形3D立体旋转特效 作者/代码整理:站长素材 (转载请附加本文地址,带有“懒人原生”字样的谢绝转载)发布日期:2013-07-20 立体效果比较强的jquery特效,周围小图组 ...
- 强大！HTML5 3D美女图片旋转实现教程
又到周末,来弄点HTML5的特效玩玩,今天要折腾的是HTML5 3D图片特效,图片在垂直方向上被分割成一条条小矩形,在图片上拖动鼠标即可让每一个小矩形旋转,从而让图片形成3D立体的效果,来看看效果图: ...
- CorelDRAW X8制作金属质感3D立体按钮
本教程教您使用CorelDRAW X8制作金属质感3D立体按钮.绘图中主要应用渐变填充技巧为立体按钮表现物体质感和丰富的色彩变化,最后实现的效果也是不错的,是很实用的案例,教程难度一般,完成图如下: ...
- css3实现3D立体翻转效果
1.在IE下无法显示翻转效果,火狐和谷歌可以 /*样式css*/ .nav-menu li { display: inline; } .nav-menu li a { color: #fff; dis ...
- 网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- CSS3样式运用，悬浮立体方块
前言 作为后端开发者,了解前端是必须的,所以自己琢磨着弄了弄一个CSS3的阴影运用. 我记得这应该是以前淘宝用过的,PS:现在跑到淘宝去看,好像没有找到了.现在流行扁平化设计,没有了阴影,没有了立体! ...
- 3D立体照片墙
代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...
- js矩阵菜单或3D立体预览图片效果
js矩阵菜单或3D立体预览图片效果 下载地址: http://files.cnblogs.com/elves/js%E7%9F%A9%E9%98%B5%E8%8F%9C%E5%8D%95%E6%88% ...
- 制作3D图片立方体旋转特效
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>CS ...
随机推荐
- Project Euler 38 Pandigital multiples
题意: 将192分别与1.2.3相乘: 192 × 1 = 192192 × 2 = 384192 × 3 = 576 连接这些乘积,我们得到一个1至9全数字的数192384576.我们称192384 ...
- locate-updatedb命令检索不全
locate-updatedb命令检索不全 执行updatedb命令,用于立刻更新locate命令所必需的数据库文件,但有些文件可能会在检索过程中被过滤掉. 有时候明明存在的文件,用find命令都能搜 ...
- Python半双工聊天
半双工聊天 半双工聊天.创建一个简单的半双工聊天程序.指定半双工,我们的意思就是,当建立一个连接且服务开始后,只有一个人能打字,而另一个参与者在得到输入消息提示之前必须等待消息.并且,一旦发送者发送了 ...
- 在数据表中字段存有excel、word文件数据，让其随着记录指针移动而改变显示
这是一个及其简单的问题,可是被绕住了.当记录移动时,装载数据到excel显示数据.这个方法写在哪里?如何触发? datasource.cds等空间的触发都是多次.到现在也没明白如何去做.笨方法: 1. ...
- ie6 bug 收集
1.IE6中奇数宽高的BUG IE6下查看,变成了right:1px的效果了: IE6还有奇数宽高的bug,解决方案就是将外部相对定位的div宽度改成偶数.高度也是一样的查看源码: CSS代码: #o ...
- C#中的Socket
];//用于缓存客户端所发送的信息,通过socket传递的信息必须为字节数组 IPEndPoint ipep = new IPEndPoint(IPAddress.Any, 9050);//本机预使用 ...
- [JAVA]比毫秒System.currentTimeMillis()更精确的时间戳（纳米级时间戳）
纳秒 ns(nanosecond):纳秒, 时间单位.一秒的10亿分之中的一个,即等于10的负9次方秒. 经常使用作 内存读写速度的单位,其前面数字越小则表示速度越快. 1纳秒=1000 皮秒 ...
- POJ 2111
记忆化搜索即可,设DP[I][J]为可到达的最大步数. 输出时用了一种较笨拙的方法,还有一种方法是使用最长上升子序列的方式,挺好,先排序,这让我想起上次BESTCODER的一题 #include &l ...
- 软件測试、ios中的測试概念以及步骤
软件測试: 软件測试的目标是应该服务于软件项目的目标,能够通过建议反馈使用更加高效的方法和工具,提升软件开发效率以及软件开发质量.同一时候还能够通过过一些手段,更早.更快.很多其它地发现缺陷.从容减少 ...
- Gretna2.0 使用过程中遇到的问题
在做Normalize的时候,报错"Cannot find T1 image (e.g. *.dcm in T1 Directory), Please Check again!", ...