张宇_20210113张宇
知识点总结
1、transform
这个属性允许你将元素旋转，缩放， 移动，倾斜等。
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
margin: 200px auto;
width: 300px;
transform-style: preserve-3d;
/*position: relative;*/
}
.box:hover{
transform: rotateY(180deg);
transition: all 1.5s linear;
}
.box1{
width: 300px;
height: 300px;
background-color: aquamarine;
text-align: center;
line-height: 300px;
border-radius:50%;
font-size: 30px;
/*position: absolute;*/
}
.box2{
width: 300px;
height: 300px;
background-color: aqua;
text-align: center;
line-height: 300px;
border-radius:50%;
font-size: 30px;
transform: rotateY(180deg);
margin-top: -300px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">云创动力</div>
<div class="box2">IT特种兵</div>
</div>
</body>
</html>
2、导航栏的设置
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 100px;
height: 50px;
transform-style: preserve-3d;
position: relative;
transition: all 1s ease;
}
.box1{
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
position: absolute;
background-color: darkgrey;
transform: translateZ(25px);
}
.box2{
width: 100px;
height: 50px;
position: absolute;
text-align: center;
line-height: 50px;
background-color: azure;
transform: translateY(25px) rotateX(-90deg);
}
.box:hover{
transform: rotateX(90deg);
}
</style>
</head>
<body>
<div class="box">
<div class="box1">云创动力</div>
<div class="box2">IT特种兵</div>
</div>
</body>
</html>
3、旋转相册
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.body{
perspective: 800px;
}
.box{
width: 300px;
height: 380px;
transform-style: preserve-3d;
position: relative;
margin: 200px auto;
animation: rotatu 6s linear infinite;
}
.box>div{
width: 300px;
height: 380px;
position: absolute;
left: 0;
top: 0;
background-image: url(img/img1.png);
background-size: cover;
}
.box>div:nth-child(1){
transform: translateZ(450px);
}
.box>div:nth-child(2){
transform: rotateY(60deg) translateZ(450px);
}
.box>div:nth-child(3){
transform: rotateY(120deg) translateZ(450px);
}
.box>div:nth-child(4){
transform: rotateY(180deg) translateZ(450px);
}
.box>div:nth-child(5){
transform: rotateY(240deg) translateZ(450px);
}
.box>div:nth-child(6){
transform: rotateY(300deg) translateZ(450px);
}
@keyframes rotatu{
from{
transform: rotateX(-20deg) rotateY(0deg);
}
to{
transform: rotateX(-20deg) rotateY(360deg);
}
}
.box:hover{
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
4、正常布局流
4.1
正常布局流(normal flow)是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。
4.2浮动（float）
{
float: left;//或者right
}
4.5清除浮动
footer {
clear: both;
}
clear 可以取三个值：
-
left：停止任何活动的左浮动 -
right：停止任何活动的右浮动 -
both：停止任何活动的左右浮动4.6总结
- 脱离文档流，不占原来的文档流位置
- 浮动元素在父元素中所占的面积的有效高度为0
- 非浮动元素的外边距不能用于它们和浮动元素之间来创建空间
心得体会
今天学习的内容主要是实践，可以发现我的动手能力比较差，通过练习实现了元素的旋转，缩放，倾斜等，比较有问题的关于图标的旋转、导航栏还有相册的制作，在不断的调试下成功实现想要的效果，对transform，translate，@keyframes等有了基础认识。
点赞
评论留言