A今天学了什么
1.水立方体
应用 transform: perspective（） 和transform-style:preserve-3d 实现立体效果
Html 源码：
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
</div>
CSS源码：
*{
margin: 0;
padding: 0;
}
@keyframes anima{
0%{
transform:perspective(800px) rotateX(72deg);
}
25%{
transform:perspective(800px) rotateX(144deg);
}
50%{
transform:perspective(800px) rotateX(216deg);
}
75%{
transform:perspective(800px) rotateX(288deg);
}
100%{
transform:perspective(800px) rotateX(360deg);
}
}
.box{
width: 200px;
height: 200px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
transform-style:preserve-3d ;
background: red;
/*transform: rotate(45deg);*/
animation:anima 5s infinite ease-in-out;
/*transform:perspective(800px) rotateX(45deg);*/
}
.box>div{
border: 1px solid black;
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
}
.box>.one{
transform: translateZ(100px) ;
}
.box>.two{
transform: translateZ(-100px) ;
}
.box>.three{
transform:translateX(100px) rotateY(90deg);
}
.box>.four{
transform:translateX(-100px) rotateY(90deg);
}
.box>.five{
transform:translateY(100px) rotateX(90deg);
}
.box>.six{
transform:translateY(-100px) rotateX(90deg);
}
2.快捷标签语法
li*10 创建10个li
li{$$}*10 创建10个内容自增的 li
li.aa*10 创建10个class为aa的li
li.aa$*10 创建10个class为aa1开始自增的li
li#aa*10 创建10个id为aa的li
自带属性写在中括号里
a[href="#"]#b$*10
B今天学会了什么
1.水立方体
应用 transform: perspective（） 和transform-style:preserve-3d 实现立体效果
Html 源码：
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
</div>
CSS源码：
*{
margin: 0;
padding: 0;
}
@keyframes anima{
0%{
transform:perspective(800px) rotateX(72deg);
}
25%{
transform:perspective(800px) rotateX(144deg);
}
50%{
transform:perspective(800px) rotateX(216deg);
}
75%{
transform:perspective(800px) rotateX(288deg);
}
100%{
transform:perspective(800px) rotateX(360deg);
}
}
.box{
width: 200px;
height: 200px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
transform-style:preserve-3d ;
background: red;
/*transform: rotate(45deg);*/
animation:anima 5s infinite ease-in-out;
/*transform:perspective(800px) rotateX(45deg);*/
}
.box>div{
border: 1px solid black;
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
}
.box>.one{
transform: translateZ(100px) ;
}
.box>.two{
transform: translateZ(-100px) ;
}
.box>.three{
transform:translateX(100px) rotateY(90deg);
}
.box>.four{
transform:translateX(-100px) rotateY(90deg);
}
.box>.five{
transform:translateY(100px) rotateX(90deg);
}
.box>.six{
transform:translateY(-100px) rotateX(90deg);
}
2.快捷标签语法
li*10 创建10个li
li{$$}*10 创建10个内容自增的 li
li.aa*10 创建10个class为aa的li
li.aa$*10 创建10个class为aa1开始自增的li
li#aa*10 创建10个id为aa的li
自带属性写在中括号里
a[href="#"]#b$*10
C今天没掌握什么
都掌握了
