css3实现旋转的立方体

利用css3实现旋转的立方体

这里主要用到了css3的transform，rotate，translate，animation

首先给ul设置transform ：rotateX（-30deg） rotateY(-55deg)使物体看起来有立体感

然后给六个li，给li设成绝对定位，使六个li重叠到一起

先做上面，选择一个li使绕x轴旋转90deg，然后再沿z轴平移100px

再来后面，选择一个li使绕x轴旋转180deg，然后再沿z轴平移100px

再来下面，选择一个li使绕x轴旋转270deg，然后再沿z轴平移100px

接下来是前面，选择一个li使绕x轴旋转360deg（其实就是一个面不用动就行了），然后再沿z轴平移100px

然后是左面，选择一个li使绕Y轴旋转90deg，然后再沿z轴平移100px

然后是右面，选择一个li使绕Y轴旋转90deg，然后再沿z轴平移-100px

现在的效果是这样的

接下来是让他动起来了，给ul加上transform-style: preserve-3d;在定义一个动画使其围绕y轴旋转

最终的效果是这样的

详细代码https://github.com/hanihanihaani/css-demo/blob/master/rotateCube.html

css3实现旋转的立方体相关推荐

CSS3 3D旋转图片立方体特效
CSS3 3D旋转图片立方体特效代码. 效果图: 这是一个3D的立方体盒子给盒子添加动画属性使其可以转动. 原理: 原理其实很简单我们看到的一个立方体其实就是靠六个平面搭建起来的如图所示 :六 ...
css3 3d旋转图片立方体特效代码
纯 CSS3 3D 旋转立方体动画特效,该 3D 立方体使用 CSS3 perspective 制作,可以在水平方向.垂直方向和平面视角方向旋转,使用 CSS 来制作立方体动画,效果非常好.下面来看看 ...
用Css3实现旋转的立方体
通过Css3,我们能够创建动画,这可以在许多网页中取代一些JavaScript中复杂的动画效果的写法,下面让我们用css3实现一个旋转的立方体吧. Html部分: 1)先给六个面写一个公共的类:cub ...
CSS3 3d旋转图片立方体案例演示
2D动画旋转和位移的基础语法旋转的基础: 语法:transform:rotate() 1:旋转的是一个度数deg 2:默认情况下,绕着一个中心点进行转动 3:transform:rotatex()绕 ...
【HTML】css3实现旋转的立方体相册
立体相册源码使用时请保存为*.html格式 <!DOCTYPE HTML> <html lang="en"> <head><meta c ...
网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
如何用css3制作一个旋转的立方体
css3增加的动画效果使得前端制作某些动画更加方便,流畅,如何制作一个最简单的会旋转的立方体呢?话不多说,直接上代码! html代码如下,需要一个大的div包裹六个div作为立方体的六个表面 < ...
CSS3 3D旋转立方
##一.3D中的透视 1.透视是我们观察事物的方式在美术学中,有一种画法叫做透视画法,他让我们对所观察的物体从二维拓展到三维,也就是说,平面的物体变成了立体,占据了独自的 ...
OpenGL设置透视投影并渲染旋转的立方体
OpenGL设置透视投影并渲染旋转的立方体先上图,再解答. 完整主要的源代码源代码剖析先上图,再解答. 完整主要的源代码 #include <GLXW/glxw.h> #includ ...
用css3制作旋转加载动画的几种方法
2019独角兽企业重金招聘Python工程师标准>>> 以WebKit为核心的浏览器,例如Safari和Chrome,对HTML5有着很好的支持,在移动平台中这两个浏览器对应的就是i ...

css3实现旋转的立方体

css3实现旋转的立方体相关推荐

最新文章

热门文章