html 透视效果,HTML5实现立方体及透视效果

通过对于HTML5的学习，实现一个具有透视效果的立方体盒子：

具体实现方法如下

我们需要先生成6个面，并添加样式

由于transform变换后会回到原始状态，因此必须添加3d变换效果

/*让子元素保留3d变换效果*/

transform-style: preserve-3d;

为了方便观看，再添加一个旋转效果

之后只需要将前后面分别平移，左右上下面移动再旋转就可以实现，比较重要的就是的注意旋转方向，根据左手定则而定。

3D坐标系

旋转的方向：(左手法则)

左手握住旋转轴，竖起拇指指向旋转轴的正方向，正向就是其余手指卷曲的方向。

所有的3d旋转，对着正方向去看，都是顺时针旋转。

透视效果

/*添加透视景深效果*/

perspective: 1px;

通过改变其值，我们可以看到一个从盒子内部视角到外部视角的效果。

/*设置透视的观察角度*/

perspective-origin: 0px 0px;

通过设置x点的值，可以实现左右视角观测立方体，设置y点的值，可以实现上下视角观测立方体，

立体盒子

.box{

height:200px;

width: 200px;

margin: 100px auto;

position: relative;

transform: rotate3d(1,1,0,-30deg);

/*让子元素保留3d变换效果*/

transform-style: preserve-3d;

/*添加透视景深效果*/

perspective: 1px;

/*设置透视的观察角度*/

perspective-origin: 0px 0px;

}

.box > div{

width: 200px;

height: 200px;

position: absolute;

opacity: 0.6;

}

.front{

background-color: red;

/*变化完毕后会回到原始状态*/

transform: translateZ(100px);

}

.back{

background-color: yellowgreen;

transform: translateZ(-100px) rotateY(180deg);

}

.left{

background-color: grey;

/*移动加旋转*/

transform: translateX(-100px) rotateY(-90deg);

}

.right{

background-color: magenta;

transform: translateX(100px) rotateY(90deg);

}

.top{

background-color: deepskyblue;

transform: translateY(-100px) rotateX(90deg);

}

.bottom{

background-color: peachpuff;

transform: translateY(100px) rotateX(-90deg);

}

front

back

left

right

top

bottom

html 透视效果,HTML5实现立方体及透视效果相关推荐

HTML5实现立方体及透视效果
通过对于HTML5的学习,实现一个具有透视效果的立方体盒子: 具体实现方法如下我们需要先生成6个面,并添加样式由于transform变换后会回到原始状态,因此必须添加3d变换效果 /*让子元素保留 ...
HTML5——3D立方体旋转动画
效果图: 代码如下: <!DOCTYPE html> <html> <head><meta charset="UTF-8">< ...
html立方体旋转展开,html5—旋转立方体
选装动画 *{box-sizing: border-box;} html{ background-color: gold; } body{ height: 20em; width: 20em; lef ...
8款帅酷的HTML5/CSS3 3D动画、图片、菜单应用
今天要给大家分享8款帅酷的HTML5/CSS3应用,它们中包括很酷的HTML5 3D动画应用,也包括实用的CSS3图片.菜单.进度条等插件,一起来看看吧. 1.HTML5 Canvas火焰燃烧动画如 ...
视觉盛宴 HTML5 3D动画应用赏析
以下是一些很棒的HTML5 3D动画应用,值得一看. 1.3D HTML5 Logo动画 HTML5多视角3D旋转动画 HTML5 3D动画实现起来非常方便,之前介绍过基于jQuery的3D旋转插件是 ...
9款超绚丽的HTML5/CSS3应用和动画特效
HTML5 现在已经不是很前卫的东西了,越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验.今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效,这里面有菜单.按钮.图片 ...
html5添加flash动画效果,霸气的HTML5 7款无Flash HTML5动画特效
本文作者html5tricks,转载请注明出处以前我们想在网页上实现一些动画特效,第一选择肯定是Flash,但是现在 1.HTML5 Canvas火焰喷射动画效果还记得以前分享过的一款HTML5烟 ...
Flash HTML5动画特效
1.HTML5 Canvas火焰喷射动画效果还记得以前分享过的一款HTML5烟花动画HTML5 Canvas烟花特效,今天我们要来分享一款类似的HTML5动画效果,一款基于HTML5 Canvas火 ...
html5卷轴展开动画,8款基于Jquery的WEB前端动画特效
超级绚丽,20款前端动画特效,轰炸你的眼睛,一定要看到最后! 1.超炫酷的30个jQuery按钮悬停动画按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的 ...

html 透视效果,HTML5实现立方体及透视效果

html 透视效果,HTML5实现立方体及透视效果相关推荐

最新文章

热门文章