css3 立方体滚动

CSS3的立方体滚动效果是一种非常炫酷的特效，可以让网页更加生动有趣。这种效果可以利用CSS3的transform属性和transition属性实现。

.cube{
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
 }
.cube div{
    position: absolute;
    width: 200px;
    height: 200px;
    padding: 20px;
    text-align: center;
    font-size: 24px;
     color: #fff;
    background-color: #607d8b;
    opacity: 0.7;
    box-shadow: 0 0 10px #333;
}
.front{
     transform: translateZ(100px);
 }
.back{
     transform: rotateY(180deg) translateZ(100px);
 }
.left{
     transform: rotateY(-90deg) translateZ(100px);
 }
.right{
     transform: rotateY(90deg) translateZ(100px);
 }
.top{
    transform: rotateX(-90deg) translateZ(100px);
 }
.bottom{
     transform: rotateX(90deg) translateZ(100px);
 }
.cube:hover{
    transform: rotateY(360deg);
}
    

首先是容器的样式，宽高设置为200px，然后设置position为relative，transform-style为preserve-3d，这个属性必须开启，否则无法呈现3d效果，然后再设置过渡属性transition为transform 1s。

然后设置每一面的样式，宽高和父容器一样，position为absolute，即绝对定位，这样每一面就可以重叠在一起，padding为20px用于撑开内容，text-align为center，字体大小为24px，颜色为白色，背景色为深灰色，不透明度为0.7，阴影颜色为黑色。

接着是每一面的变换样式，前面用translateZ(100px)将其向前平移100px，后面用rotateY(180deg)将其旋转180度并向前平移100px，左侧面用rotateY(-90deg)将其向左旋转90度并向前移100px，右侧面用rotateY(90deg)将其向右旋转90度并向前移100px，顶部面用rotateX(-90deg)将其向上旋转90度并向前移100px，底部面用rotateX(90deg)将其向下旋转90度并向前移100px。

最后是鼠标悬浮时的样式，将整个容器旋转360度。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！