html怎么让表格有3d效果,CSS样表做的立体3D旋转特效

[HTML] 纯文本查看 复制代码

CSS3立方体3D旋转

*{/*全体元素样表*/

margin:0 auto;/*外边框为0*/

padding:0;/*内边框为0*/

}

@keyframes rotate{/*动画 旋转 规则与animation*/

0%{/*初始*/

transform:rotateX(0deg) rotateY(0deg);/*绕XY轴转*/

}

100%{/*结束*/

transform:rotateX(360deg) rotateY(360deg);/*绕X轴转,绕Y轴旋转*/

}

}

html{/*标签选择器*/

background-color: gray;/*背景颜色灰色*/

}

.wrap{/*类选择器*/

margin-top:200px;/*上外边距*/

perspective: 1000px; /*视图(你的屏幕)距元素的距离,也就是观看的距离*/

}

.cube{/*类选择器*/

width:200px;/*宽度*/

height:200px;/*高度*/

position:relative;/*选择定位相对初始位置定位*/

transform-style:preserve-3d; /*默认flat 2D*//*设置3D空间中呈现*/

transform:rotateX(-30deg) rotateY(-70deg); /*绕X轴旋转,绕Y轴旋转*/

animation:rotate 20s infinite linear;/*绑定选择器keyframe的名称rotate,完成动画的时间20s,infinite设置循环,效果为匀速 规则与keyframes*/

}

.cube > div{/*选择父元素为.cube的所有div元素*/

width:100%;/*宽度*/

height:100%;/*高度*/

position:absolute;/*选择定位为绝对定位*/

opacity:0.85;/*不透明度 0(完全透明) 1(完全不透明)*/

transition:transform 0.4s ease-in;/*过渡效果的CSS属性的名称,完成过渡效果需要的时间,速度越来越快(ease-in-out先快后慢，linear匀速)*/

}

.cube > span{/*选择父元素为.cube的所有span元素*/

width:50%;/*宽度*/

height:50%;/*高度*/

position:absolute;/*选择定位为绝对定位*/

top:50px;/*顶部边缘*/

left:50px;/*左边缘*/

}

.out-front{/*前 选择.cube元素内部所有的.out-front元素*//*下同 */

transform: translateZ(100px);/*沿Z轴移动*/

}

.out-back{/*后*/

transform: translateZ(-100px) rotateY(180deg);/*沿着Z轴移动，绕Y轴旋转*/

}

.out-left{/*左*/

transform: translateX(-100px) rotateY(-90deg);/*沿着X轴移动，绕Y轴旋转*/

}

.out-right{/*右*/

transform: translateX(100px) rotateY(90deg);/*沿着X轴移动，绕Y轴旋转*/

}

.out-top{/*上*/

transform: translateY(-100px) rotateX(90deg);/*沿着Y轴移动，绕X轴旋转*/

}

.out-bottom{/*下*/

transform: translateY(100px) rotateX(-90deg);/*沿着Y轴移动，绕X轴旋转*/

}

.in-front{/*前 选择.cube元素内部所有的.in-front元素*//*下同 */

transform: translateZ(50px);/*沿着Z轴移动*/

}

.in-back{/*后*/

transform: translateZ(-50px) rotateY(180deg);/*沿着Z轴移动，绕Y轴旋转*/

}

.in-left{/*左*/

transform: translateX(-50px) rotateY(-90deg);/*沿着X轴移动，绕Y轴旋转*/

}

.in-right{/*右*/

transform: translateX(50px) rotateY(90deg);/*沿着X轴移动，绕Y轴旋转*/

}

.in-top{/*上*/

transform: translateY(-50px) rotateX(90deg);/*沿着Y轴移动，绕X轴旋转*/

}

.in-bottom{/*下*/

transform: translateY(50px) rotateX(-90deg);/*沿着Y轴移动，绕X轴旋转*/

}

.cube:hover .out-front{/*前 选择鼠标浮动的.wrap元素内部所有的.out-front元素*//*下同 */

transform: translateZ(200px);/*沿着Z轴移动*/

}

.cube:hover .out-back{/*后*/

transform: translateZ(-200px) rotateY(180deg);/*沿着Z轴移动，绕Y轴旋转*/

}

.cube:hover .out-left{/*左*/

transform: translateX(-200px) rotateY(-90deg);/*沿着X轴移动，绕Y轴旋转*/

}

.cube:hover .out-right{/*右*/

transform: translateX(200px) rotateY(90deg);/*沿着X轴移动，绕Y轴旋转*/

}

.cube:hover .out-top{/*上*/

transform: translateY(-200px) rotateX(90deg);/*沿着Y轴移动，绕X轴旋转*/

}

.cube:hover .out-bottom{/*下*/

transform: translateY(200px) rotateX(-90deg);/*沿着Y轴移动，绕X轴旋转*/

}

div img{

width: 100%;

height: 100%;

}