1.需要了解相关css样式
1.position属性 值:relative\absolute;
/* position进行定位,父元素的position属性值为relative相对定位,子元素的position属性值为absolute相对定位*/
position:relative;
position:absolute;
2.transform-style属性 值:flat\preserve-3d;
/* transform-style在3d的情况下是否以3d的方式呈现,值flat子元素不保留3d的位置,preserve-3d子元素保留3d位置,呈现3d形式*/
transform-style:preserve-3d;
3.perspective属性 值:number\none;
/* 当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身,perspective 属性只影响 3D 转换元素 */
perspective:600;
4.动画animation属性
/* animation: 动画的名称 完成动画的时间 动画的速度 循环播放*/
animation: rotate 4s liner infinite;
/*定义关键帧@keyframes 动画的名字*/
@keyframes rotate{
0%{
transform: rotateX(0deg) rotateY(0deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg);
}
}
5.nth-child(n)选择器;
.box:nth-child(2);
/*选择第二个.box*/
6.transition属性
/*过渡属性 完成过渡的时间*/
transition:0.5s;
7.transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
transform:rotate();/*定义2d旋转角度*/
transform:rotateX(90deg);/沿着X轴旋转90度,定义3d旋转*/
transform:rotateY(90deg);/沿着X轴旋转90度,定义3d旋转*/
translateX(x)/*定义转换,只是用 X 轴的值。*/
translateY(y)/*定义转换,只是用 Y 轴的值。*/
translateZ(z)/*定义 3D 转换,只是用 Z 轴的值。*/
效果显示
代码
Documentbody{
background-color: #4b8bf4;
}
.wrap{
width: 200px;
height: 200px;
position: relative;
margin: 150px auto;
transform-style:preserve-3d;
animation: rotate 4s linear infinite;
perspective: 600;
}
.box{
width: 200px;
height: 200px;
position: absolute;
transition: 0.5s;
}
.box:nth-child(1){
background: url(./img/1.jpg);
transform: rotateX(90deg) translateZ(100px);
}
.box:nth-child(2){
background: url(./img/2.jpg);
transform: rotateX(90deg) translateZ(-100px);
}
.box:nth-child(3){
background: url(./img/3.jpg);
transform: rotateY(90deg) translateZ(100px);
}
.box:nth-child(4){
background: url(./img/4.jpg);
transform: rotateY(90deg) translateZ(-100px);
}
.box:nth-child(5){
background: url(./img/5.jpg);
transform: translateZ(100px);
}
.box:nth-child(6){
background: url(./img/6.jpg);
transform: translateZ(-100px);
}
@keyframes rotate {
0%{
transform: rotateX(0deg) rotateY(0deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg);
}
}
.wrap:hover .box:nth-child(1){
transform: rotateX(90deg) translateZ(200px);
}
.wrap:hover .box:nth-child(2){
transform: rotateX(90deg) translateZ(-200px);
}
.wrap:hover .box:nth-child(3){
transform: rotateY(90deg) translateZ(200px);
}
.wrap:hover .box:nth-child(4){
transform: rotateY(90deg) translateZ(-200px);
}
.wrap:hover .box:nth-child(5){
transform:translateZ(200px);
}
.wrap:hover .box:nth-child(6){
transform:translateZ(-200px);
}
.bot{
width: 80px;
height: 80px;
position: absolute;
top: 50%;
margin-top: -40px;
left: 50%;
margin-left: -40px;
}
/* ?为什么从7开始,:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。*/
.bot:nth-child(7){
background: url(./img/7.jpg);
transform: rotateX(90deg) translateZ(40px) ;
}
.bot:nth-child(8){
background: url(./img/7.jpg);
transform: rotateX(90deg) translateZ(-40px) ;
}
.bot:nth-child(9){
background: url(./img/7.jpg);
transform: rotateY(90deg) translateZ(40px);
}
.bot:nth-child(10){
background: url(./img/7.jpg);
transform: rotateY(90deg) translateZ(-40px);
}
.bot:nth-child(11){
background: url(./img/7.jpg);
transform: translateZ(40px);
}
.bot:nth-child(12){
background: url(./img/7.jpg);
transform: translateZ(-40px);
}