您现在的位置是：网站首页> 编程资料编程资料

css3 transform 3d 使用css3创建动态3d立方体(html5实践)纯CSS3实现的3D立方体旋转动画特效源码HTML5/CSS3实现的立方体翻转3D全屏焦点图特效源码采用CSS3实现的表面颜色可渐变3D立方体动画特效源码彩色3D立方体扭曲CSS3动画可在不同角度扭曲、放大和缩小css3 transform 3d 使用html5+css3创建动态旋转的3d立方体基于CSS3实现立方体自转效果

2023-10-15 493人已围观

简介 在今天的课程中，我将向大家介绍如何使用css3创建3d的立方体,操作方法为：上下左右键，实现立方体的翻转旋转效果，特酷，本人看后，目瞪口呆，值得收藏于参考

在今天的课程中，我将向大家介绍如何使用css3创建3d的立方体。大家可以通过下面的链接浏览实际效果，操作上下左右键，实现立方体的翻转效果。
demo地址：https://www.jb51.net/jiaoben/70022.html
下面我们开始介绍如何制作。
html：

复制代码
代码如下:




One face


Up, down, left, right


Lorem ipsum.


New forms of navigation are fun.


Rotating 3D cube


More content




上面的html中，class为face的6个div分别代表立方体的6个面，使用one到six的class名字对他们加以区分。外部包含有id为cube和experiment的两层容器，这两层都是必须的，少了任何一个，3d效果都出不来。
其中experiment起到镜头的作用。对他设置焦距，这样3d效果才能在内部元素上展示出来。
perspective属性定义z轴平面的深度，同时也定义了平面上面和下面元素的相对尺寸。总的来说，perspective值越小，物体越大，离你也越近；perspective值越大，物体越小，离你也越远。大家可以通过http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html查看效果。
perspective-origin属性定义视角的原点。
css：

复制代码
代码如下:

#experiment {
-webkit-perspective: 800;
-moz-perspective: 800;
-o-perspective: 800;
perspective: 800;
-webkit-perspective-origin: 50% 200px;
-moz-perspective-origin: 50% 200px;
-o-perspective-origin: 50% 200px;
perspective-origin: 50% 200px;
}

cube设置的属性中包含固定的宽度和高度，并将position设置为relative。固定的高度和宽度是必须的，这样cube中的元素才能在限定的区域内执行3d动画。如果将高度和宽度设置为100%，cube中的元素将在整个页面范围内运动。
transition用来设置动画相关的属性。transform-style: preserve-3d; 使得cube中的所有元素作为一个整体来产生3d效果。
大家可以浏览http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/，了解更多信息。
css：

复制代码
代码如下:

#cube {
position: relative;
margin: 100px auto;
height: 400px;
width: 400px;
-webkit-transition: -webkit-transform 2s linear;
-moz-transition: -moz-transform 2s linear;
-o-transition: -o-transform 2s linear;
transition: transform 2s linear;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}

接下来统一为立方体的6个面设置css属性。
css：

复制代码
代码如下:

.face {
position: absolute;
height: 360px;
width: 360px;
padding: 20px;
background-color: rgba(50, 50, 50, 0.7);
}

接下来但是设置6个面的3d相关属性，使用rotateX或者rotateY来实现立方体表面朝向的翻转，使用translateZ实现立方体表面在3维空间的位置移动。
css：

复制代码
代码如下:

#cube .one {
-webkit-transform: rotateX(90deg) translateZ(200px);
-moz-transform: rotateX(90deg) translateZ(200px);
-o-transform: rotateX(90deg) translateZ(200px);
transform: rotateX(90deg) translateZ(200px);
}
#cube .two {
-webkit-transform: translateZ(200px);
-moz-transform: translateZ(200px);
-o-transform: translateZ(200px);
transform: translateZ(200px);
}
#cube .three {
-webkit-transform: rotateY(90deg) translateZ(200px);
-moz-transform: rotateY(90deg) translateZ(200px);
-o-transform: rotateY(90deg) translateZ(200px);
transform: rotateY(90deg) translateZ(200px);
}
#cube .four {
-webkit-transform: rotateY(180deg) translateZ(200px);
-moz-transform: rotateY(180deg) translateZ(200px);
-o-transform: rotateY(180deg) translateZ(200px);
transform: rotateY(180deg) translateZ(200px);
}
#cube .five {
-webkit-transform: rotateY(-90deg) translateZ(200px);
-moz-transform: rotateY(-90deg) translateZ(200px);
-o-transform: rotateY(-90deg) translateZ(200px);
transform: rotateY(-90deg) translateZ(200px);
}
#cube .six {
-webkit-transform: rotateX(-90deg) translateZ(200px);
-moz-transform: rotateX(-90deg) translateZ(200px);
-o-transform: rotateX(-90deg) translateZ(200px);
transform: rotateX(-90deg) translateZ(200px);
}

最后要做的是为页面绑定keydown事件，这样当你按下上下左右键的时候，实现立方体的翻转运动效果。
javascript：

复制代码
代码如下:

var xAngle = 0, yAngle = 0;
document.addEventListener('keydown', function(e)
{
switch(e.keyCode)
{
case 37: // left
yAngle -= 90;
break;
case 38: // up
xAngle += 90;
break;
case 39: // right
yAngle += 90;
break;
case 40: // down
xAngle -= 90;
break;
};
$('cube').style.webkitTransform = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)";
}, false);

课程就讲到这里，接下来大家可以动手尝试一下。

上一篇：html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)HTML5中视频音频的使用详解HTML5+CSS3模仿优酷视频截图功能示例canvas与html5实现视频截图功能示例html5 视频播放解决方案HTML5页面音视频在微信和app下自动播放的实现方法浅谈Html5中视频 音频标签 进度条的问题使用HTML5在网页中嵌入音频和视频播放的基本方法浅谈基于HTML5的在线视频播放方案HTML5中的音频和视频媒体播放元素小结用HTML5制作视频拼图的教程

下一篇：html5中canvas学习笔记1-画板的尺寸与实际显示尺寸HTML5 video标签（播放器）学习笔记（二）:播放控制HTML5 video标签（播放器）学习笔记（一）:使用入门HTML5学习笔记之History APIhtml5中canvas学习笔记2-判断浏览器是否支持canvasHTML5学习笔记之html5与传统html区别

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网