下面我将详细讲解“原生javascript+css3编写的3D魔方动画旋扭特效”的完整攻略，希望对您有所帮助。
简介
3D魔方动画旋扭特效是一种非常炫酷的页面特效，可以提高网站的可视性和用户体验。该特效基于原生Javascript和CSS3技术，可以实现3D模型的旋转、拖拽、还原等动态效果。
实现步骤
下面是实现该特效的完整步骤：
第一步：创建3D模型
首先需要创建一个3D模型，可以选择使用CSS3的3D转换技术或者Canvas等技术来制作。个人推荐使用CSS3技术，因为它更加容易掌握，而且性能更好。
第二步：添加触发事件
接着需要添加触发事件，比如鼠标点击事件（mousedown）、鼠标移动事件（mousemove）等。当用户进行特定操作时，可以触发相应的3D效果。
第三步：绑定CSS3动画效果
在第二步中，当用户触发鼠标事件时，需要将3D模型进行旋转、缩放等特定动画效果。这些动画效果可以使用CSS3的变换技术来实现，例如transform属性、transition属性等等。
第四步：实现模型还原
在完成旋转、缩放等特定动画效果后，需要将3D模型还原到初始状态，保证下一次操作的正常进行。具体实现方式可以在触发鼠标释放事件（mouseup）时，调用一个还原函数，将3D模型的动画效果还原回初始状态。
示例一：基本3D魔方实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3实现3D魔方</title>
<style type="text/css">
body{
margin: 0;
height: 100vh;
perspective: 5000px;
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) rotateX(20deg) rotateY(20deg);
transform-style: preserve-3d;
}
.cube{
width: 90px;
height: 90px;
position: absolute;
transform-style: preserve-3d;
animation: change 10s infinite linear;
}
.container .cube:nth-child(1){
transform: rotateZ(90deg) translate3d(0,-100px,0);
animation-delay: 0.5s;
}
.container .cube:nth-child(2){
transform: rotateZ(-90deg) translate3d(0,-100px,0);
animation-delay: 1s;
}
.container .cube:nth-child(3){
transform: rotateX(90deg) translate3d(0,-100px,0);
animation-delay: 1.5s;
}
.container .cube:nth-child(4){
transform: rotateX(-90deg) translate3d(0,-100px,0);
animation-delay: 2s;
}
.container .cube:nth-child(5){
transform: rotateY(90deg) translate3d(0,-100px,0);
animation-delay: 2.5s;
}
.container .cube:nth-child(6){
transform: rotateY(-90deg) translate3d(0,-100px,0);
animation-delay: 3s;
}
@keyframes change{
from {transform: rotateY(0deg) rotateX(0deg);}
to {transform: rotateY(360deg) rotateX(360deg);}
}
</style>
</head>
<body>
<div class="container">
<div class="cube">
<div class="face top"><img src="http://p1.music.126.net/nz2Qv0Pe5iyavd-UvM0jkw==/109951164974124613.jpg"></div>
<div class="face bottom"><img src="http://p1.music.126.net/nz2Qv0Pe5iyavd-UvM0jkw==/109951164974124613.jpg"></div>
<div class="face left"><img src="http://p1.music.126.net/nz2Qv0Pe5iyavd-UvM0jkw==/109951164974124613.jpg"></div>
<div class="face right"><img src="http://p1.music.126.net/nz2Qv0Pe5iyavd-UvM0jkw==/109951164974124613.jpg"></div>
<div class="face front"><img src="http://p1.music.126.net/nz2Qv0Pe5iyavd-UvM0jkw==/109951164974124613.jpg"></div>
<div class="face back"><img src="http://p1.music.126.net/nz2Qv0Pe5iyavd-UvM0jkw==/109951164974124613.jpg"></div>
</div>
<div class="cube">
<div class="face top"><img src="http://p1.music.126.net/7GZ9FS5Iotaa_ztL1BnhBQ==/109951163511508388.jpg"></div>
<div class="face bottom"><img src="http://p1.music.126.net/7GZ9FS5Iotaa_ztL1BnhBQ==/109951163511508388.jpg"></div>
<div class="face left"><img src="http://p1.music.126.net/7GZ9FS5Iotaa_ztL1BnhBQ==/109951163511508388.jpg"></div>
<div class="face right"><img src="http://p1.music.126.net/7GZ9FS5Iotaa_ztL1BnhBQ==/109951163511508388.jpg"></div>
<div class="face front"><img src="http://p1.music.126.net/7GZ9FS5Iotaa_ztL1BnhBQ==/109951163511508388.jpg"></div>
<div class="face back"><img src="http://p1.music.126.net/7GZ9FS5Iotaa_ztL1BnhBQ==/109951163511508388.jpg"></div>
</div>
<div class="cube">
<div class="face top"><img src="http://p1.music.126.net/e5r6SVVzHVuzUgIgCBwM5Q==/109951163583026649.jpg"></div>
<div class="face bottom"><img src="http://p1.music.126.net/e5r6SVVzHVuzUgIgCBwM5Q==/109951163583026649.jpg"></div>
<div class="face left"><img src="http://p1.music.126.net/e5r6SVVzHVuzUgIgCBwM5Q==/109951163583026649.jpg"></div>
<div class="face right"><img src="http://p1.music.126.net/e5r6SVVzHVuzUgIgCBwM5Q==/109951163583026649.jpg"></div>
<div class="face front"><img src="http://p1.music.126.net/e5r6SVVzHVuzUgIgCBwM5Q==/109951163583026649.jpg"></div>
<div class="face back"><img src="http://p1.music.126.net/e5r6SVVzHVuzUgIgCBwM5Q==/109951163583026649.jpg"></div>
</div>
<div class="cube">
<div class="face top"><img src="http://p1.music.126.net/o1H7P1fngsq9QqXs6M3Oug==/109951164846707363.jpg"></div>
<div class="face bottom"><img src="http://p1.music.126.net/o1H7P1fngsq9QqXs6M3Oug==/109951164846707363.jpg"></div>
<div class="face left"><img src="http://p1.music.126.net/o1H7P1fngsq9QqXs6M3Oug==/109951164846707363.jpg"></div>
<div class="face right"><img src="http://p1.music.126.net/o1H7P1fngsq9QqXs6M3Oug==/109951164846707363.jpg"></div>
<div class="face front"><img src="http://p1.music.126.net/o1H7P1fngsq9QqXs6M3Oug==/109951164846707363.jpg"></div>
<div class="face back"><img src="http://p1.music.126.net/o1H7P1fngsq9QqXs6M3Oug==/109951164846707363.jpg"></div>
</div>
<div class="cube">
<div class="face top"><img src="http://p1.music.126.net/TwJJK3D1dVJpAQIzQ6NbyQ==/109951164486620716.jpg"></div>
<div class="face bottom"><img src="http://p1.music.126.net/TwJJK3D1dVJpAQIzQ6NbyQ==/109951164486620716.jpg"></div>
<div class="face left"><img src="http://p1.music.126.net/TwJJK3D1dVJpAQIzQ6NbyQ==/109951164486620716.jpg"></div>
<div class="face right"><img src="http://p1.music.126.net/TwJJK3D1dVJpAQIzQ6NbyQ==/109951164486620716.jpg"></div>
<div class="face front"><img src="http://p1.music.126.net/TwJJK3D1dVJpAQIzQ6NbyQ==/109951164486620716.jpg"></div>
<div class="face back"><img src="http://p1.music.126.net/TwJJK3D1dVJpAQIzQ6NbyQ==/109951164486620716.jpg"></div>
</div>
<div class="cube">
<div class="face top"><img src="http://p1.music.126.net/weoJJ12JVO2KcQ-r09zAug==/109951163783486133.jpg"></div>
<div class="face bottom"><img src="http://p1.music.126.net/weoJJ12JVO2KcQ-r09zAug==/109951163783486133.jpg"></div>
<div class="face left"><img src="http://p1.music.126.net/weoJJ12JVO2KcQ-r09zAug==/109951163783486133.jpg"></div>
<div class="face right"><img src="http://p1.music.126.net/weoJJ12JVO2KcQ-r09zAug==/109951163783486133.jpg"></div>
<div class="face front"><img src="http://p1.music.126.net/weoJJ12JVO2KcQ-r09zAug==/109951163783486133.jpg"></div>
<div class="face back"><img src="http://p1.music.126.net/weoJJ12JVO2KcQ-r09zAug==/109951163783486133.jpg"></div>
</div>
<div class="cube">
<div class="face top"><img src="http://p1.music.126.net/BazDR-yqMQFBHTDKTu7OyQ==/1996069092910880.jpg"></div>
<div class="face bottom"><img src="http://p1.music.126.net/BazDR-yqMQFBHTDKTu7OyQ==/1996069092910880.jpg"></div>
<div class="face left"><img src="http://p1.music.126.net/BazDR-yqMQFBHTDKTu7OyQ==/1996069092910880.jpg"></div>
<div class="face right"><img src="http://p1.music.126.net/BazDR-yqMQFBHTDKTu7OyQ==/1996069092910880.jpg"></div>
<div class="face front"><img src="http://p1.music.126.net/BazDR-yqMQFBHTDKTu7OyQ==/1996069092910880.jpg"></div>
<div class="face back"><img src="http://p1.music.126.net/BazDR-yqMQFBHTDKTu7OyQ==/1996069092910880.jpg"></div>
</div>
</div>
</body>
</html>
示例二：拖拽魔方动画效果实现
```html
...
