网站建设之教你使用CSS 3D轮转展示产品信息.doc

网站建设之教你使用CSS3D轮转展示产品信息 网站建设之教你使用CSS3D轮转展示产品信息 有很多展示产品信息的方式，如鼠标悬停展示，甚至是弹出。在这里，我们将学习如何使用CSS3D轮转展示产品信息。 DreamweaverCS5css 成品 在谈论技术前，下面的是我们想要达到的结果，产品的形象是可见的，而该产品的信息被隐藏。当用户鼠标悬停产品上，他们都将在垂直向上的方向旋转，使产品隐藏起来，而展示出产品信息，看起来就像一个旋转的立方体。 技术 做这个翻转立方体，我们将用到的技术是从以前我们做过的（用css3和jquery做有哪些信誉好的足球投注网站框）。这有两个元素，前部和底部，前面是产品，底部是产品信息。 有两个元素包装它们，第一个命名为wrapper,用来设置透明度，旨在定义从用户角度到相对元素有多远，相对值小的将放在相对近的。第二个元素命名为item并被wrapper包装，里面包含产品和信息，这个元素有一个悬停事件将其X轴旋转95度显示产品信息和隐藏图像。 标记和样式 每个产品有两种包装元素和一个单一的信息元素如前所述，下面是标记： lt;divclass=wrapper lt;divclass=item lt;imgsrc=web0752./images/contact.png lt;spanclass=information lt;strongContactFormlt;/strongTheeasiestwaytoaddacontactformtoyourshop.lt;/span lt;/div lt;/div lt;!--tonwrapper-- 每个包装内联块显示屏,角度值4000px，item将有保留-3D变换风格，其子级保留其三维位置，当翻转时也有过渡属性。 .wrapper{ display:inline-block; width:310px; height:100px; vertical-align:top; margin:1em1.5em2em0; cursor:pointer; position:relative; font-family:Tahoma,Arial; perspective:4000px;} .item{height:100px; transform-style:preserve-3d; transition:transform.6s;} 产品形象和产品信息，将有过渡，他们都将改变其边界半径和阴影框值，当用户悬停，这个目标使过渡更优雅。 .itemimg{ display:block; position:absolute; top:0; border-radius:3px; box-shadow:0px3px8pxrgba(0,0,0,0.3); transform:translateZ(50px); transition:all.6s;} .rmation{ display:block; position:absolute; top:0; height:80px; width:290px; text-align:left; border-radius:15px; padding:10px; font-size:12px; text-shadow:1px1px1pxrgba(255,255,255,0.5); box-shadow:none; background:linear-gradient(top,rgba(236,241,244,1)0%,rgba(190,202,217,1)100%); transform:rotateX(-90deg)translateZ(50px); transition:all.6s;} 最后，当用户悬停产品，它会旋转的item元素和变化图像和信息的边界半径和箱阴影。 .item:hover{ transform:translateZ(-50px)rotateX(95deg);} .item:hoverimg{ box-shadow:none;border-radius:15px;} .item:rmation{ box-shadow:0px3px8pxrgba(0,0,0,0.3); border-radius:3px;} 革命成功，战利品如下： 注意事项 这个立方体3D转换效果可以兼容部分流览器，我还添加使用Modernizr的检查浏览器功能的脚本检测。 打鸟 s4uxfx.Com