css3 transform及原生js实现鼠标拖动3D立方体旋转

作者：佚名字体：[增加减小] 来源：互联网时间：2017-06-02

本文主要包含css3 transform,css3 transform 属性,css3 transform style,css3 transform scale,css3 transform用法等相关知识,佚名希望在学习及工作中可以帮助到您

本文通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3D立方体的拖动旋转，并将旋转角度实时的反应至界面上显示。

实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性。

从而通过改变transform：rotate属性值来达到3D立方体旋转的效果：

HTML代码块：

</div>

<body>
<input type="button" class="open" value="点击散开"/>
<input type="text" class="xNum" value="0"/>//X轴旋转角度
<input type="text" class="yNum" value="0"/>//Y轴旋转角度
<input type="text" class="zNum"/>
<div class="big_box">
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
</div>
</body>

</div> </div>

CSS代码块：

</div>

<style>
body{cursor: url("img/openhand1.png"),auto;}
.big_box{
width: 500px;
height: 500px;
margin: 200px auto;
}
.box{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; &nbs

您可能想查找下面的文章:

2017-06-02css3实现的多级渐变下拉菜单导航效果代码
2017-06-02CSS3中Animation动画属性用法详解
2017-06-02CSS3 选择器伪类选择器介绍
2017-06-02CSS的background属性及CSS3的背景图片设置总结
2017-06-02CSS3实现简易版的刮刮乐效果
2017-06-02一款纯css3实现的漂亮的404页面的实例教程
2017-06-02纯CSS3打造动感漂亮时尚的扇形菜单
2017-06-02css3 background属性调整增强介绍
2017-06-02CSS3实现闪烁动画效果的方法
2017-06-02CSS3 animation实现简易幻灯片轮播特效

css3 transform及原生js实现鼠标拖动3D立方体旋转

您可能想查找下面的文章:

相关文章

文章分类

最近更新的内容