CSS3 3d旋转图片立方体案例演示

2D动画旋转和位移的基础语法
旋转的基础：
语法：transform:rotate()
1：旋转的是一个度数deg
2：默认情况下，绕着一个中心点进行转动
3：transform:rotatex()绕x轴旋转
4：transform:rotatey()绕Y轴旋转
平移的基础：
语法： 2d位移：
transform:translate(参数1.参数2)
参数1：在x轴移动的距离
参数2：在Y轴移动的距离
参数的设置：如果是正值的情况下：往右往下负值：往左往上
单独设置：
translateX:在x上位移
translateY:在Y上位移**
物体平移和旋转很容易理解，就是让一个对象绕着一个点或者一条线进行各种平移和旋转变化，所以这里不再详述。我们来用旋转和平移动画做一个立方体案例。
最终效果如下所示

首先是html代码：

很简单，因为立方体就是六个面所以我们这里有六个div分别设置为不同的类名
接下来是CSS样式代码：

首先我们给父元素设定一个大小，然后加入我们要放在立方体中间的照片作为背景，最后利用定位将其整个居中。最后加上transform-style:preserve-3d;让其形成3D空间，立方体是3D图形，我们在3D空间内才能完成，最后让父元素沿着XY轴进行一点小小的旋转更方便看到效果。
接着我们给六个div统一设置都具有的样式：

因为div是定位以后元素会脱离文本流所以可以利用定位让六个div层叠到一起
接着我们给子元素设置透明度，以及背面不可见的效果，让我们能更具体的看到立方体效果以及我们放在立方体里面的照片，当然在做的过程中我们如果为了看到每一步的效果，要把backface-visibility这个属性先注释掉，方便观察每个面的变化。
接下来就是利用2d动画分别对每个div进行变化，让每个div去到该去的地方组成一个立方体。

首先立方体第一个面，让其沿着Z轴位移，位移的距离为父元素DIV宽高的一般，这就是第一个面，变化后如下图：

这个1就这我们的第一个面
接着我们来变化第二个面
首先让第二个面沿着Z轴向和1相反的方向位移150px，也就是宽高的一半，然后再绕Y轴旋转180°,向后位移效果和1的向前位移一样，但是为什么要旋转180°呢？因为我们看到的背面，是正面旋转过去后的背面，上面的内容“2”会左右相反，所以要旋转180°，这样我们不论看那一面都是正的数字。变化后效果如下:
接着是第三个面代码：

第三个面是侧面，所以和前两个是垂直的，所以位移的轴便是X或者Y轴，这里我们先变化Y轴的作为3。位移后效果如下：
可以看到，3在位移后应当再旋转的度数为90°，并且是绕着它本身最中间的那条线，也就是3现在和父元素的那个交线，也就是他自身的X轴逆时针旋转90°，变化后效果如下：

同理相对的面，变化的数字相反即可：
结果如下
最后两个面，是和原本四个面都垂直的面，很显然是先沿着X轴位移后再进行旋转得到的面。首先是位移：位移后的图片，很明显是沿着图片竖直面和原本父元素交线旋转，也就是Y轴进行顺时针旋转：

最后一个面同理，进行一样的变换，只是数字相反
最终我们终于得到了这样的一个六面立方体，接着我们把背面不可见加上
我们还可以加上一个CSS3动画让我们可以看到整体的效果，代码如下：
父元素div中加入调用动画

最后加上动画的关键帧编写我们就可以看到神器的C3动画效果啦！

CSS3 3d旋转图片立方体案例演示相关推荐

CSS3 3D旋转图片立方体特效
CSS3 3D旋转图片立方体特效代码. 效果图: 这是一个3D的立方体盒子给盒子添加动画属性使其可以转动. 原理: 原理其实很简单我们看到的一个立方体其实就是靠六个平面搭建起来的如图所示 :六 ...
css3 3d旋转图片立方体特效代码
纯 CSS3 3D 旋转立方体动画特效,该 3D 立方体使用 CSS3 perspective 制作,可以在水平方向.垂直方向和平面视角方向旋转,使用 CSS 来制作立方体动画,效果非常好.下面来看看 ...
3d旋转图片制作HTML,js css3制作3D旋转图片切换代码
特效描述:js css3 3D旋转图片切换,js css3酷炫的3D图片旋转切换,3D旋转的图片轮播代码.(不兼容IE6,7,8) 代码结构 1. 引入CSS 2. HTML代码 3D Rotatin ...
CSS3——3D旋转图（跑马灯效果图）
2019独角兽企业重金招聘Python工程师标准>>> CSS3--3D旋转图(跑马灯效果图) CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的 ...
HTML5 3D旋转图片相册
H5旋转3D相册,鼠标放置暂停,图片灰度级为0,有放大效果. 该实例运用H5和CSS3动画效果,未用javascript.提高了本人对CSS3 新属性的了解及掌握. 完整代码如下: <!DOCT ...
php 图片 3d旋转图片,html5实现图片的3D旋转效果
我们先来看一下实现效果: (学习视频分享:html视频教程) H5旋转3D相册,鼠标放置暂停,图片灰度级为0,有放大效果. 该实例运用H5和CSS3动画效果,未用javascript.提高了本人对CS ...
JQ 实现轮播图（3D旋转图片轮播效果）
轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...
CSS3 3D旋转立方
##一.3D中的透视 1.透视是我们观察事物的方式在美术学中,有一种画法叫做透视画法,他让我们对所观察的物体从二维拓展到三维,也就是说,平面的物体变成了立体,占据了独自的 ...
3D环动画css3实现,CSS3 3D酷炫立方体变换动画的实现
我爱撸码,撸码使我感到快乐! 大家好,我是Counter,本章微博主要利用了CSS3的一些新特性, 主要用到关键帧来使3D图形运动起来,涉及到了一些抽象的思想,立体的想象. 先给大家看看完成的效果,代 ...

CSS3 3d旋转图片立方体案例演示

CSS3 3d旋转图片立方体案例演示相关推荐

最新文章

热门文章