[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%;
}
![qw.jpg](i/qw.jpg)
![hw.jpg](i/hw.jpg)
![zw.jpg](i/zw.jpg)
![yw.jpg](i/yw.jpg)
![sw.jpg](i/sw.jpg)
![xw.jpg](i/xw.jpg)