前端基础-css3（3D小作品）

1、3D导航栏效果
在这里插入图片描述

body{
margin:0;
padding:0;
}
.nav{
height:40px;
margin-top:50px;
text-align:center;/设置字体居中/
list-style:none;/去除ul的小点点/
}
li{
margin-left:2px;/设置距左边的外边距为2px/
width:120px;
height:40px;
line-height:40px;/设置字体的高度为元素的高度/
float:left;/设置li水平布局/
transform-style:preserve-3d;/transform–style属性指定嵌套元素是怎样在三维空间中呈现。使用此属性必须先使用 transform 属性.当值为flat时表示所有子元素在2D平面展示/
transition:all 1s;/设置动画的过渡效果为1s/
}
li span{
position:absolute;/设置span为绝对定位，原位置释放/
display:block;/设置为块级元素/
width:100%;/设置span在li中的宽高都是100%/
height:100%;
}
li span:first-child{
background-color:#0FF;
transform:rotateX(90deg)translateZ(20px);/将每个li中第一个span元素延X轴旋转90度，达到一种看不见的效果，设置元素绕Z轴旋转二分之一的元素的高/
}
li span:last-child{
background-color:#f0f;
transform:translateZ(20px);/将每个li中第二个span元素显示的效果，设置元素绕Z轴旋转二分之一的元素的高/
}
li:hover{
transform:rotateX(-90deg);/当鼠标移入时，元素绕X轴旋转-90度/
}
效果图：
在这里插入图片描述
2、3D立方体运动

body{
padding:0;
margin:0;
background-color:#fff;
}

#q{
width:200px;
height:200px;
margin:100px auto;
/perspective:1000px;/
position:relative;

  transform-style:preserve-3d;
  animation: spin  40s infinite linear;/*1、设置要进行动画的名称，2、动画的时长3、待定，4、设置动画将如何完成一个周期linear表示速度一直是相同的*/
  }

#q:hover{
animation-play-state:paused;/鼠标移入后动画停止，移除鼠标后继续动画/
}

  @keyframes spin {/*通过 @keyframes 规则，您能够创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。0-100%,from（与 0% 相同）,to（与 100% 相同）*/
    from { transform: rotateX(0)  rotateY(0); }
    to { transform: rotateX(360deg)  rotateY(360deg); }
  }

.a1,.a2,.a3,.a4,.a5,.a6{
width:100%;
height:100%;
text-align:center;
line-height:200px;
font-size:40px;
opacity:0.8;
position:absolute;
left:0;
top:0;
}
.a1{
background-color:#f00;
transform:rotateY(90deg) translateZ(-100px); /设置a1 Y轴旋转90度，达到一种不可见的效果，立方体的左面，Z轴旋转-100度，二分之一的元素高度/
}
.a2{
background-color:#0f0;
transform:rotateY(90deg) translateZ(100px); /设置a2 Y轴旋转90度，达到一种不可见的效果，立方体的右面，Z轴旋转100度，二分之一的元素高度/
}
.a3{
background-color:#00f;
transform:rotateX(90deg) translateZ(-100px); /设置a3 X轴旋转90度，达到一种不可见的效果，立方体的下面，Z轴旋转-100度，二分之一的元素高度/
}
.a4{
background-color:#ff0;
transform:rotateX(90deg) translateZ(100px); /设置a4 Y轴旋转90度，达到一种不可见的效果，立方体的上面，Z轴旋转100度，二分之一的元素高度/
}
.a5{
background-color:#0ff;
transform:translateZ(100px); /设置a5 为立方体的前面，Z轴旋转100度，二分之一的元素高度/
}
.a6{
background-color:#f0f;
transform:translateZ(-100px); /设置a6 为立方体的后面，Z轴旋转100度，二分之一的元素高度/
}
效果图
在这里插入图片描述

前端基础-css3（3D小作品）

猜你喜欢