实现立体状物体的旋转展示
2017-05-04 22:50
204 查看
先给展示一下效果啊，就是造这么一个立体状，然后鼠标点击之后再移动就可以实现360度无死角旋转了。
此篇用到css比较多，所以先和大家推荐一个写css好用的编辑器，webstorm。用它写css时候可以省很多力气。
直接上代码：
下面分开来介绍：
body中定义了父类和子类div，看名字也大概可以看出来，父类div是用来盛放子类的容器，而子类div则是用来表示一个立方体的六个面。
这些style的定义无关紧要，可根据个人喜好随意修改。
立体图形就要涉及到三维了，这里给予介绍二维到三维的转换。
这是实现立方体的棱阴影效果的css，上述shadow的四个参数的含义也在注释中给出来了。
这几个样式设置就是将二维的DIV旋转平移而组成立方体的过程了。因为父类大小是200px，下面子类平移的距离都是100px，相反方向各平移100px，这关系就对应了。
为实现旋转效果，js必不可少，引用了jQuery，至于JS的含义，想必看完就能明白了。
此篇用到css比较多，所以先和大家推荐一个写css好用的编辑器，webstorm。用它写css时候可以省很多力气。
直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding:0;
}
body{
background: rgba(0,0,0,0.5);
}
.father{
width:200px;
height:200px;
margin:200px auto;
position: relative;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
/*perspective景深 transform;2D到3D的转换 preserve-3d创建3D环境*/
-webkit-transform: perspective(800px) rotateX(-10deg) rotateY(60deg);
-moz-transform: perspective(800px) rotateX(-10deg) rotateY(60deg);
-ms-transform: perspective(800px) rotateX(-10deg) rotateY(60deg);
-o-transform: perspective(800px) rotateX(-10deg) rotateY(60deg);
transform: perspective(800px) rotateX(-10deg) rotateY(60deg);
}
/* >子代选择器*/
.father >div{
height:100%;
width:100%;
position: absolute;
-webkit-box-shadow: 0 0 50px skyblue;
-moz-box-shadow: 0 0 50px skyblue;
box-shadow: 0 0 50px skyblue;
/* x轴 y轴 阴影面积 阴影颜色*/
}
.bottom{
background-image: url("image/1.jpg");
-webkit-transform:rotateX(90deg) translateZ(-100px) ;
-moz-transform: rotateX(90deg) translateZ(-100px);
-ms-transform: rotateX(90deg) translateZ(-100px);
-o-transform: rotateX(90deg) translateZ(-100px);
transf
13fbb
orm: rotateX(90deg) translateZ(-100px);
}
.top{
background-image: url("image/1.jpg");
-webkit-transform:rotateX(90deg) translateZ(100px) ;
-moz-transform: rotateX(90deg) translateZ(100px);
-ms-transform: rotateX(90deg) translateZ(100px);
-o-transform: rotateX(90deg) translateZ(100px);
transform: rotateX(90deg) translateZ(100px);
}
.left{
background-image: url("image/1.jpg");
-webkit-transform:rotateY(90deg) translateZ(100px) ;
-moz-transform: rotateY(90deg) translateZ(100px);
-ms-transform: rotateY(90deg) translateZ(100px);
-o-transform: rotateY(90deg) translateZ(100px);
transform: rotateY(90deg) translateZ(100px);
}
.right{
background-image: url("image/1.jpg");
-webkit-transform:rotateY(90deg) translateZ(-100px) ;
-moz-transform: rotateY(90deg) translateZ(-100px);
-ms-transform: rotateY(90deg) translateZ(-100px);
-o-transform: rotateY(90deg) translateZ(-100px);
transform: rotateY(90deg) translateZ(-100px);
/* transform执行顺序：从左到右 rotateY是旋转 translateZ是平移*/
}
.front{
background-image: url("image/1.jpg");
-webkit-transform:translateZ(100px) ;
-moz-transform: translateZ(100px);
-ms-transform: translateZ(100px);
-o-transform:translateZ(100px);
transform:translateZ(100px)
}
.back{
background-image: url("image/1.jpg");
-webkit-transform:translateZ(-100px) ;
-moz-transform: translateZ(-100px);
-ms-transform: translateZ(-100px);
-o-transform:translateZ(-100px);
transform:translateZ(-100px)
}
</style>
<script src="js/jquery/dist/jquery.min.js"> </script>
<script>
$(function(){
//登DOM完成后再执行js代码
//jQuery语法 $()或者jQuery()
$('.father').mousedown(function(ev){
// console.log(ev.pageX);
var x=ev.clientX;//获取鼠标按下后的水平坐标
var y=ev.clientY;
// console.log(x);
$(document).bind('mousemove',function(ev){
var x_=ev.clientX;
var y_=ev.clientY;
$('.father').css({
'transform':'perspective(800px) rotateX('+y_+'deg) rotateY('+x_+'deg)'
})
}).mouseup(function (){
$(document).unbind('mousemove');
$(document).mousedown=null;
})
})
return false;
})
</script>
</head>
<body>
<div class="father">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
</body>
</html>下面分开来介绍：
<body> <div class="father"> <div class="top"></div> <div class="bottom"></div> <div class="left"></div> <div class="right"></div> <div class="front"></div> <div class="back"></div> </div> </body>
body中定义了父类和子类div，看名字也大概可以看出来，父类div是用来盛放子类的容器，而子类div则是用来表示一个立方体的六个面。
*{
margin: 0;
padding:0;
}
body{
background: rgba(0,0,0,0.5);
}这些style的定义无关紧要，可根据个人喜好随意修改。
.father{
width:200px;
height:200px;
margin:200px auto;
position: relative;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
/*perspective景深 transform;2D到3D的转换 preserve-3d创建3D环境*/
-webkit-transform: perspective(800px) rotateX(-10deg) rotateY(60deg);
-moz-transform: perspective(800px) rotateX(-10deg) rotateY(60deg);
-ms-transform: perspective(800px) rotateX(-10deg) rotateY(60deg);
-o-transform: perspective(800px) rotateX(-10deg) rotateY(60deg);
transform: perspective(800px) rotateX(-10deg) rotateY(60deg);
}立体图形就要涉及到三维了，这里给予介绍二维到三维的转换。
/* >子代选择器*/
.father >div{
height:100%;
width:100%;
position: absolute;
-webkit-box-shadow: 0 0 50px skyblue;
-moz-box-shadow: 0 0 50px skyblue;
box-shadow: 0 0 50px skyblue;
/* x轴 y轴 阴影面积 阴影颜色*/
}这是实现立方体的棱阴影效果的css，上述shadow的四个参数的含义也在注释中给出来了。
.bottom{
background-image: url("image/1.jpg");
-webkit-transform:rotateX(90deg) translateZ(-100px) ;
-moz-transform: rotateX(90deg) translateZ(-100px);
-ms-transform: rotateX(90deg) translateZ(-100px);
-o-transform: rotateX(90deg) translateZ(-100px);
transform: rotateX(90deg) translateZ(-100px);
}
.top{
background-image: url("image/1.jpg");
-webkit-transform:rotateX(90deg) translateZ(100px) ;
-moz-transform: rotateX(90deg) translateZ(100px);
-ms-transform: rotateX(90deg) translateZ(100px);
-o-transform: rotateX(90deg) translateZ(100px);
transform: rotateX(90deg) translateZ(100px);
}
.left{
background-image: url("image/1.jpg");
-webkit-transform:rotateY(90deg) translateZ(100px) ;
-moz-transform: rotateY(90deg) translateZ(100px);
-ms-transform: rotateY(90deg) translateZ(100px);
-o-transform: rotateY(90deg) translateZ(100px);
transform: rotateY(90deg) translateZ(100px);
}
.right{
background-image: url("image/1.jpg");
-webkit-transform:rotateY(90deg) translateZ(-100px) ;
-moz-transform: rotateY(90deg) translateZ(-100px);
-ms-transform: rotateY(90deg) translateZ(-100px);
-o-transform: rotateY(90deg) translateZ(-100px);
transform: rotateY(90deg) translateZ(-100px);
/* transform执行顺序：从左到右 rotateY是旋转 translateZ是平移*/
}
.front{
background-image: url("image/1.jpg");
-webkit-transform:translateZ(100px) ;
-moz-transform: translateZ(100px);
-ms-transform: translateZ(100px);
-o-transform:translateZ(100px);
transform:translateZ(100px)
}
.back{
background-image: url("image/1.jpg");
-webkit-transform:translateZ(-100px) ;
-moz-transform: translateZ(-100px);
-ms-transform: translateZ(-100px);
-o-transform:translateZ(-100px);
transform:translateZ(-100px)
}这几个样式设置就是将二维的DIV旋转平移而组成立方体的过程了。因为父类大小是200px，下面子类平移的距离都是100px，相反方向各平移100px，这关系就对应了。
<script src="js/jquery/dist/jquery.min.js"> </script>
<script>
$(function(){
//登DOM完成后再执行js代码
//jQuery语法 $()或者jQuery()
$('.father').mousedown(function(ev){
// console.log(ev.pageX);
var x=ev.clientX;//获取鼠标按下后的水平坐标
var y=ev.clientY;
// console.log(x);
$(document).bind('mousemove',function(ev){
var x_=ev.clientX;
var y_=ev.clientY;
$('.father').css({
'transform':'perspective(800px) rotateX('+y_+'deg) rotateY('+x_+'deg)'
})
}).mouseup(function (){
$(document).unbind('mousemove');
$(document).mousedown=null;
})
})
return false;
})
</script>为实现旋转效果，js必不可少，引用了jQuery，至于JS的含义，想必看完就能明白了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 实现物体绕不同轴旋转，并可以外部调用的函数
- Unity3D实现点击物体旋转
- 【Unity快速实现小功能】实现物体绕轴旋转
- unity3d实现相机对场景物体的旋转、缩放、平移查看功能、近似于scene下查看场景的效果
- [Android]ScaleViewPager--仿“想去”客户端图片展示效果--中轴旋转ViewPager动画实现
- 【DX9】实现让绘制的物体旋转
- unity3d5.1物体椭圆旋转选择界面实现（二）
- [Unity3D]Unity3D游戏开发之鼠标旋转、缩放实现3D物品展示
- 实现物体的左右旋转
- jQuery实现的产品自动360度旋转展示特效源码分享
- 一行代码实现一个物体保持面向另一个物体（旋转） .
- UNITY3D 一行代码实现一个物体保持面向另一个物体（旋转）
- Unity3d物体模型（实现旋转缩放平移自动旋转）
- Unity3D游戏开发之鼠标旋转、缩放实现3D物品展示
- 【狼】unity 鼠标拖拽物体实现任意角度自旋转
- 实现物体绕不同轴旋转，并可以外部调用的函数
- Unity3d物体模型（实现旋转缩放平移自动旋转）
- Unity3D实现点击物体旋转和拖动
- 纯JS实现旋转图片3D展示效果
- unity3d5.1物体椭圆旋转选择界面实现（一）