rgba
正反两面展示效果
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> /*要实现这一点，必须规定两项内容： 规定您希望把效果添加到哪个 CSS 属性上 规定效果的时长*/ @-webkit-keyframes move {/*@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器： 规定动画的名称 规定动画的时长 */ 0%{ -webkit-transform:rotateX(0deg) scale(0); -webkit-animation-timing-function:3s;/*规定动画的速度曲线。默认是 "ease"。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。*/ } 100% { -webkit-transform:rotateX(360deg) scale(1); } } body { background:url(Images/miaov.jpg) no-repeat center 0; width:1024px; margin:0 auto; padding-top:127px; position:relative; } ul,h2 { margin:0; padding:0; } li { list-style:none; } .page { width:400px; height:300px; margin:100px auto 0; position:relative; -webkit-perspective:800;/*定义 3D 转换元素的透视视图。*/ -webkit-transform-style:preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现。有两个值：flat：所有子元素在 2D 平面呈现。preserve-3d：保留3D空间。*/ } #box { width:400px; height:300px;-webkit-transition:1s -webkit-transform linear; /*改变些容器的样式时的动画效果*/ -webkit-transform:rotateY(0) rotateX(0); /*-webkit-animation-name:"move"; -webkit-animation-duration:2s;*/ -webkit-animation:move 2s;/*您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。*/ -webkit-transform-style:preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现。*/ } #box div { width:400px; height:300px; position:absolute; left:0; top:0;box-shadow:1px 2px 7px #999; } h2 { height:60px; line-height:60px; font-size:40px; color:#fff;background:rgba(0,0,0,0.3); text-indent:10px; position:absolute; bottom:0; left:0; width:100%; font-family:'Microsoft YaHei'; letter-spacing:5px; font-weight:normal; } .div { background:url(Images/html5.png) no-repeat; -webkit-transform:rotateY(180deg); /*图层是透明的*/ } .div2 { background:url(Images/miaov_bg.png) no-repeat; -webkit-transform:translateZ(1px); /*沿Z方向移动,前后两层错开,使之不在同一平面上*/ } .page:hover #box { -webkit-transform:rotateY(180deg) rotateX(0); } </style> </head> <body> <div class="page"> <div id="box"> <div class="div"><h2>我是反面</h2></div> <div class="div2"><h2>我是正面</h2></div> </div> </div> </body> </html>
