之前朋友圈很火的淘宝造物节, 刚接触的时候以为是使用 webGL 写的, 后来看一篇文章才知道主要的竟然是用 CSS 写的
惊讶之余 Kay 也按照这个思路尝试去写一下.
1, 创建空的 div.container 来承载主要内容
2, 准备好一张比较大的图片, 最为背景图片, 我这里的图片是 7000*3500 的尺寸, 感谢我们公司设计 MM 提供素材.
3, 创建 24 个 div.bg,background-position 切割图片作为背景
4,container 设置 perspective 及 transform-style:perspective-3d, 用于子元素的 3d 转换效果.
5,24 个 bg 设置样式, 绝对定位, 这里要注意的是 transform-origin:50% 50% 1000px; 前两个值分别是 X,Y 轴的中心点, 第三个值让它的变形中线点围绕着 Z 轴 1000px 的方位做变换, 其实这个值是在 JS 里计算出来的
6,js 计算每个 bg 元素围绕着中心点的 Y 轴旋转的角度
以下是 kay 做的一个简单的 demo,
图片首尾链接处会有一点空隙, 上下的中心位置会有小部分空白, 这是没有计算好的结果.
PS: 请无视楼主懒到家的鼠标拖拽时间, 且并没有做适配, 请使用最新浏览器查看, 图片较大, 请耐心等待
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>CSS3 仿淘宝造物节伪 3D 全景 </title>
- <meta name="viewport" content="width=device-width,initial-scale=1.0" />
- <style>
- *{margin: 0;padding: 0;}
- html,body,.container{height: 100%;}
- .container{perspective: 1000px;perspective-origin: 50% 50%;transform-style: preserve-3d;}
- .bg{background: url(http://7u2kau.com1.z0.glb.clouddn.com/star.png) no-repeat;background-position: 0 50%; height: 100%;position: absolute;transform-origin: 50% 50% 1000px;width:265px;left:50%;margin-left:-67px;}
- </style>
- </head>
- <body>
- <div class="container">
- </div>
- <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
- <script>
- var arr = [];
- var ismouse = false;
- var prevX;
- var mouseX;
- var z;// 元素距中心点的距离
- $(document).ready(function(){
- var box = $(".container");
- var h = box.height()
- var count = 24;
- var w = 2*h/24;
- z = (w/2)/(Math.atan(Math.PI/180*7.5));
- box.css("perspective",z+"px");
- for(var i = 0;i<count; i++){
- var list = $("<div class='bg bg-"+i+"'/>").appendTo(box);
- list.css("background-position",-w*i+"px 50%");
- list.css("background-size","auto"+h+"px");
- list.css("transform-origin","50% 50%"+z+"px");
- list.width(w+2);
- // var deg = -360/24*i;
- var deg = -(Math.PI/12*i)/(Math.PI/180);
- list.css("transform","rotateY("+deg+"deg)");
- arr.push(deg);
- }
- $(document).on('mousedown touchstart',function(e){
- mouseDown(e);
- })
- $(document).on('mousemove touchmove',function(e){
- mouseMove(e);
- })
- $(document).on('mouseup touchend',function(){
- mouseUp();
- })
- // setInterval(add,33);
- })
- function mouseDown(e){
- var ev = e.type == 'touchstart' ? e.originalEvent.touches[0] : e;
- ismouse = true;
- prevX = ev.pageX;
- }
- function mouseMove(e){
- var ev = e.type == 'touchmove' ? e.originalEvent.touches[0] : e;
- if(ismouse){
- mouseX = ev.pageX;
- var x = mouseX - prevX;
- var deg = -Math.atan2(x,z);
- deg = 180/Math.PI * deg;
- prevX = mouseX;
- add(deg);
- }
- }
- function mouseUp(){
- ismouse = false;
- }
- function add(s){
- for(var i = 0;i<arr.length; i++){
- var item = $(".bg").eq(i);
- arr[i] += s;
- if(arr[i]<= -360){
- arr[i] += 360;
- }else if(arr[i]>0){
- arr[i] -= 360;
- }
- item.css("transform","rotateY("+arr[i]+"deg)");
- }
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/28490/907937d187085eb969bbdb0d73d10646.html