步骤 1.先用css将6张图片摆成下图的样子: 下面就是通过css3的3D变换将每个面进行翻转,使之成为一个立体的盒子,代码如下: //左面 .pic2{transform:rotateY(90deg);//沿y轴翻转90度 transform-origin:right;//以右边为轴}//前面 .pic6{transform:translateZ(100%);//垂直屏幕向外移动立方体的长度} 其他...
css3d实现两面翻转的盒子 <!DOCTYPEhtml>meta charset"utf-8"meta name"viewport"content"width=device-width, initial-scale=1"titletitlestyle>body{perspective:500px;}.box{position:relative;width:300px;height:300px;margin:100px auto;transform-style:preserve-3d;transition:all.4s;}.front,.back{position:...