css3D旋转立方体
2018-10-15 本文已影响0人
两年半练习程序员
gif图,请耐心等待加载
3D旋转效果主要使用了CSS3 transform 属性
首先我们先完善布局
要想完成一个立方体,首先我们要有一个参考界面,也就是立方体的核心
如图,标注区域就是我们的核心区,立方体的每个界面都是以核心为参考系
image.png
核心区域只需要一个简单的平面就可以,记得加上transform-style: preserve-3d;子元素将保留其 3D 位置。
<body>
<!-- 核心区 -->
<ul class="box">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
.box{
position: absolute;
height: 200px;
width: 200px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
transform-style: preserve-3d;
background: #eee;
box-sizing: border-box;
}
核心区.png
接下来将定位六个面位置,为了方便观察位置,我们给核心区一个默认旋转值transform: rotateX(45deg) rotateY(45deg);
然后是根据核心区定位第一个面
<body>
<!-- 核心区 -->
<ul class="box">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
.box{
position: absolute;
height: 200px;
width: 200px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
transform-style: preserve-3d;
background: #eee;
box-sizing: border-box;
transform: rotateX(45deg) rotateY(45deg);
}
.box li{
position: absolute;
top: 0;
left: 0;
list-style: none;
width: 200px;
height: 200px;
}
.box li:nth-child(1){
background: #159DE3;
transform: translateX(-100px) rotateY(90deg)
}
第一个面.png
translateX(-100px) rotateY(90deg)的意思是元素沿着X轴移动-100px,沿着 Y 轴的 3D 旋转90度同理,与这个面对应的应该是
元素沿着X轴移动100px,沿着 Y 轴的 3D 旋转90度translateX(100px) rotateY(90deg)
image.png
红色被核心区挡住了一部分,放心不影响
举一反三,我们将其他界面完成
html,body {width: 100%;height: 100%;}
* {margin: 0;padding: 0;}
.box{
position: absolute;
height: 200px;
width: 200px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
transform-style: preserve-3d;
background: #eee;
box-sizing: border-box;
transform: rotateX(45deg) rotateY(45deg);
}
.box li{
position: absolute;
top: 0;
left: 0;
list-style: none;
width: 200px;
height: 200px;
opacity: 0.5;
}
.box li:nth-child(1){
background: #159DE3;
transform: translateX(-100px) rotateY(90deg)
}
.box li:nth-child(2){
background: red;
transform: translateX(100px) rotateY(-90deg)
}
.box li:nth-child(3){
background: orange;
transform: translateZ(100px) rotateY(0deg)
}
.box li:nth-child(4){
background: green;
transform: translateZ(-100px) rotateY(0deg)
}
.box li:nth-child(5){
background: pink;
transform: translateY(-100px) rotateX(90deg);
}
.box li:nth-child(6){
background: blue;
transform: translateY(100px) rotateX(90deg);
}
image.png
看上去不太美观,我们把核心区颜色去掉,核心区只是一个参考系的作用,没必要显示出来
image.png
哦了,布局已经完成,接下来让立方体跟着鼠标旋转
前面已经说过,所有的面都是根据核心区去定位的,所以旋转立方体其实就是旋转核心区
我们已经将核心区的旋转默认值设置为transform: rotateX(45deg) rotateY(45deg);
打开控制台我们来修改旋转值来看下效果
gif图片,耐心等待加载
所以只要修改核心区的旋转,其他几个面也会相应的根据核心区做出位置改变
根据鼠标在body上的位置,来等比旋转立方体
<script>
$('body').mousemove(function(e){
console.log(e.pageX + ", " + e.pageY)
var bWidth=$('body').width()/360;
var bHeight=$('body').height()/360;
var roateY=e.pageX/bWidth;
var roateX=e.pageY/bHeight;
console.log(roateY)
console.log(roateX)
$('.box').css('transform',"rotateX("+roateX+"deg) rotateY("+roateY+"deg)")
});
</script>
点赞.jpg
