html魔方转动效果,html5+css3实现旋转魔方的点点滴滴

一、知识点1：touch事件的相关内容 touchstart touchmove touchend

和其他常用事件一样，touch事件中的event对象中有许多非常有用的方法与属性，而且通过jQuery/Zepto封装之后的事件对象与原生的事件对象又有所不同，因此死记硬背显然不是最好的方式，为了能够正确的使用，我常常使用如下方式来查阅event对象，此处以zepto中使用为例

$('.box').on('touchstart', function(event) {

console.log(event);

})

这样我就将对应事件的事件对象打印了出来，我可以轻松的查看他的方法，属性。通过这样的方式，我们发现 touchstart touchmove touchend 中有三个TouchList对象，分别是touches，targetTouches, changeTouches, 这三个对象中都保存了当手指触摸到屏幕上时，对应的坐标等信息。由于只有changeTouches能够捕获到手指离开时的坐标，因此，我们在使用的时候，就只关注changeTouches.

二、css3 3D旋转的相关内容

css3的3D效果，我是这样来理解的。

1、首先，需要一个容器，这个容器需要声明一个属性，告诉浏览器这是一个3D空间

.contain { transform-style: preserve-3d; }

当没有设置该属性时，元素将会做平面的3d变化，而不会有立体感

2、其次，我们需要设置视距，我们都知道现实中的近大远小，距离不同，近大远小的比例不同，这里也是一样，因此视距的大小会影响，具体的视点，大约就是我们的眼睛所在位置，默认的视点在屏幕的正中心。

.contain {

perspective: 500px;

}

该属性可以设置在容器元素上，也可以设置在子元素上，当设置在容器元素上时，所有的子元素视点相同，因此同样角度不同位置的子元素会有不同的近大远小形态。而设置在子元素上，所有的子元素看上去形态一样，因为他们有各自的视点，角度没有变化。

示例如下 demo

See the Pen dMXVMr by Ormie (@yangbo5207) on CodePen.

3、设置视点的位置刚才已经说过，默认的视点位置大约在我们看屏幕的眼睛处，如果我们要修改视点的位置，则需要用到下面的属性.一般来说，我们都不需要修改视点位置

.contain {

perspective-origin: 50% 30px;

}

4、后面的元素是否需要被遮挡？默认情况下，后面的元素是不会被遮挡的，因此我们可以透过前面的元素看到后面的元素，如果需要符合现实的视觉效果，将后面的元素遮挡住，则需要用到下面的设置

.contain { backface-visibility: hidden; }

理解了这些之后，我们就可以使用rotate, translate, scale来进行布局了。

我们来看一个3d布局实例 demo

See the Pen yOJzEK by Ormie (@yangbo5207) on CodePen.

三、如何使用js改变css3的属性

html魔方转动效果,html5+css3实现旋转魔方的点点滴滴相关推荐

html5 相册翻转效果,HTML5 css3：3D旋转木马效果相册
这篇博客的目的是因为上篇HTML5 CSS3专题诱人的实例 CSS3打造百度贴吧的3D翻牌效果中有个关于CSS 3D效果的比较重要的知识点没讲到,就是perspective和tranlateY 效果 ...
html5倒计时效果,html5+css3进度条倒计时动画特效代码【推荐】
html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的,看到效果非常棒并且很实用,就第一时间把它整理出来与大家分享了,主要用到了html5.javascript和css ...
html帧动画效果,HTML5+CSS3从入门到精通之CSS3 animation实现逐帧动画
本篇文章探讨了HTML5+CSS3从入门到精通之CSS3 animation实现逐帧动画,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < css3里面的animatio ...
html5 抽奖效果,html5+css3实现抽奖活动的效果
看过我博客的知道,前几天我发过一个通过form表单来实现和用户交互效果,上次是通关过table实现用户注册页面,那么今天我们也是通过table的表单效果来画出抽奖的页面,通过css3和javascri ...
css3魔方鼠标怎么用,CSS3之3D魔方鼠标控制酷炫效果
前面文章有制作水晶魔方,这次我们升级一下它的功能,通过鼠标控制魔方旋转. 大家先看效果这酷炫的效果,你怎么看? 这次效果,咱们需要用JS实现.主要是监听鼠标事件,计算鼠标滑动距离,改变魔方的rota ...
用html怎样实现抽奖效果,html5+css3实现抽奖活动的效果
2019独角兽企业重金招聘Python工程师标准>>> 看过我博客的知道,前几天我发过一个通过form表单来实现和用户交互效果,上次是通关过table实现用户注册页面,那么今天我们也 ...
html5 css3雪花效果,HTML5 | CSS3水晶皇冠雪花形状
CSS 语言: CSSSCSS 确定 *, *:after, *:before { box-sizing: border-box; } html, body { width: 100%; height ...
html5液体效果,HTML5/CSS3/SVG实现的液体掉落（滑落）动画
CSS 语言: CSSSCSS 确定 @import url("https://fonts.googleapis.com/css?family=Raleway:300,700,900&quo ...
css3实现旋转魔方
1.html代码 <div class="wrap"><ul class="bigger"><ul class="sma ...

html魔方转动效果,html5+css3实现旋转魔方的点点滴滴

html魔方转动效果,html5+css3实现旋转魔方的点点滴滴相关推荐

最新文章

热门文章