CSS3 3D变换之综合运用-html教程-PHP中文网

首页

web前端

html教程

CSS3 3D变换之综合运用

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:16 AM

先上效果图吧

点击'roll'按钮，会出现旋转的动画

代码如下

<!DOCTYPE html><html><head>    <title></title>    <script type="text/javascript" src="JS/jquery-1.12.2.min.js"></script>    <style type="text/css">        div#camera{            width: 500px;            height: 500px;            outline: 1px solid black;            margin:100px auto;            position: relative;            perspective: 1000px;        }        div#camera>div{            width: 400px;            height: 400px;            position: absolute;            top:calc(50% - 200px);            left:calc(50% - 200px);            outline: 1px solid black;            transition: all 1s linear;            background-color: #fff;            }        div#camera>div:nth-child(1){            transform: rotateY(0deg) translateZ(200px);            z-index: 99;        }        div#camera>div:nth-child(2){            transform: rotateY(90deg) translateZ(200px);        }                div#camera>div:nth-child(3){            transform: rotateY(180deg) translateZ(200px);        }        div#camera>div:nth-child(4){            transform: rotateY(270deg) translateZ(200px);        }        div#camera>div>img{            width: 100%;        }        button{            margin: 10px auto;            display: block;        }    </style></head><body>    <div id="camera">        <div><img  src="/static/imghwm/default1.png"  data-src="Img/102342_40949584.png"  class="lazy"/ alt="CSS3 3D变换之综合运用" ></div>        <div><img  src="/static/imghwm/default1.png"  data-src="Img/102342_40949584.png"  class="lazy"/ alt="CSS3 3D变换之综合运用" ></div>        <div><img  src="/static/imghwm/default1.png"  data-src="Img/102342_40949584.png"  class="lazy"/ alt="CSS3 3D变换之综合运用" ></div>        <div><img  src="/static/imghwm/default1.png"  data-src="Img/102342_40949584.png"  class="lazy"/ alt="CSS3 3D变换之综合运用" ></div>    </div>    <button value="roll">roll</button>    <script type="text/javascript">        $(document).ready(function() {            (function() {                var count=0, reversedCount=4;                 var changeRotateY = function($ele, deg) {                    var index = $ele.index()+1+count;                    var deg = deg*index;                    $ele[0].setAttribute('style','transform:rotateY('+deg+'deg) translateZ(200px);')                }                $('button[value="roll"]').on('click', function() {                    $('div#camera>div').each(function() {                        changeRotateY($(this), 90);                    });                    // changeRotateY($('div#camera>div:nth-child(1)'), 90);                    // changeRotateY($('div#camera>div:nth-child(2)'), 90);                    // changeRotateY($('div#camera>div:nth-child(3)'), 90);                    // changeRotateY($('div#camera>div:nth-child(4)'), 90);                    count++;                     reversedCount--;                    $('div#camera>div').eq(reversedCount%4).css({'z-index':'99'}).siblings().css({'z-index':'0'});                    if(reversedCount==0){                        reversedCount=4;                    }                });            })();                    });    </script></body></html>

稍微解析一下：

CSS部分用来生成静态的三维盒子，#camera下的四个子div分别旋转0°、90°、180°、270°后再以自身旋转后的坐标系为基准 translateZ(200px) ，相当于四个子div分别向前（也就是正对屏幕的方向）、向右、向后（也就是背向屏幕的方向）、向左移动了200px，由于div本身的尺寸就是400px*400px，因此做此变换后四个div就围成了一个立体的盒子。此时从上往下看，效果图如下：

这里的 transform 的顺序很重要，如果是先 rotateY 再 translateZ , 那么 translateZ 是以rotate以后的坐标轴进行平移，这样才能达到前后左右平移的效果；如果先 translateZ 再 rotateY , 那么所有元素都会先平移，然后在一个位置上进行旋转了！
changeRotateY 函数用来改变div的旋转角度，根据该元素的 eq 和传入的 count 值(按钮被点击的次数)来设置元素的 rotateY 的值。由于遇到了动态获取 transform 值的问题这里的函数灵活性不高，有点遗憾。第一次点击的时候， count 为0， index() 为0的元素的 rotateY 会从0°增加到90°， index() 为1的元素的 rotateY 会从90°增加到180°，and so on; 第二次点击， count 为1，上述值会各增加90°，完成无限旋转的效果；
遇到的一个很大的问题就是转到后面的元素依旧会显示出来。试过 background-color 和 backface-visibility:hidden 都不怎么好用，尤其是 backface-visibility ，转到90度的时候还是显示的，在90.01°时才会隐藏backface, 如果想用 backface-visibility 来隐藏后面元素的话得fine-tune, 还会引起稍微的错位问题，遂放弃；
最后使用的是 z-index 来隐藏后面的元素，动态设置转到最前面的元素的 z-index 为较大值。注意 z-index 属性不对 position 为 static 的元素起作用。当然我们这里的div们都是 absolute ，所以就能应用得很好啦~
要显示的元素的 eq 值分别为3、2、1、0，当然直接用递增的 count 变量+ switch / if else 语句也能做，但陡减可读性；取而代之的是增加了一个递减的 reversedCount 变量，它来负责匹配每次要设置 z-index 的元素。

欢迎转载，请注明出处。

参考资料：玩轉 CSS 3D - 原理篇

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

See all articles