我要评论
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: skyblue;
/*平移 ,可以为负值*/
/*transform: translateX(20px) translateY(20px);*/
/*简写的形式*/
transform: translate(20px,50px);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: skyblue;
margin: 100px auto;
/*缩放*/
/*取值范围0~1，超过1则放大，负值就是反向缩小，超过负一，则反向放大*/
transform: scaleX(0.9) scaleY(0.5);
/*简写形式*/
transform: scale(0.5,0.5);
}
</style>
</head>
<body>
<div class="box">
hello word
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: skyblue;
margin: 100px auto;
/*旋转*/
/*transform: rotateX(45deg) rotateY(45deg);*/
/*简写形式*/
/*transform: rotate(40deg,0deg);*/
transform: rotateZ(45deg);
</style>
</head>
<body>
<div class="box">
hello word
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: skyblue;
margin: 100px auto;
/*倾斜*/
transform: skewX(0deg) skewY(40deg);
/*简写形式*/
transform: skew(0deg,20deg);
}
</style>
</head>
<body>
<div class="box">
hello word
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: skyblue;
margin: 100px auto;
transform: rotateZ(0deg);
/*原点变换*/
/*可以用，top left right bottom center 改变变换的原点*/
/*也可以用px值去表示*/
/*也可以用百分比去表示*/
transform-origin: 50% 75%;
}
</style>
</head>
<body>
<div class="box">
hello word
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: skyblue;
margin: 100px auto;
}
.box:hover{
width: 1000px;
height: 400px;
background-color: red;
/*先指定一下需要过渡的属性*/
/*可以单独指定，多个中间用逗号分割，all代表所有属性*/
transition-property: all;
/*指定过渡持续时间*/
transition-duration: 10s;
/*指定过渡的效果*/
transition-timing-function: cubic-bezier(0,1.84,1,-1.03);
/*过渡开始之前的延迟时间*/
transition-delay: 1s;
/*简写形式*/
transition: all 10s 1s;
/*指定的需要过渡的属性，执行时间，执行开始的延迟时间*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: red;
/*定义动画的名称*/
animation-name: myanimation;
/*定义动画开始之前的延迟时间*/
animation-delay: 1s;
/*定义动画执行时间*/
animation-duration: 5s;
/*定义动画执行效果*/
animation-timing-function: ease;
/*定义动画的执行次数，可以用数字代替，执行几次，也可以用infinite无限执行*/
animation-iteration-count: infinite;
/*定义当前动画效果播放的方向*/
animation-direction: alternate;
/*定义动画开始之前或者播放之后进行的操作。*/
/*animation-fill-mode: both;*/
/*定义动画状态的 paused暂停 running播放*/
animation-play-state: running;
}
@keyframes myanimation{
0%{
transform: translate(0px,0px) rotateZ(0deg);
background-color: #f00;
}
25%{
transform: translate(400px,0px) rotateZ(360deg);
background-color: #0f0;
}
50%{
transform: translate(400px,400px) rotateZ(720deg);
background-color: #00f;
}
75%{
transform: translate(800px,400px) rotateZ(1080deg);
background-color: #ff0;
}
100%{
transform: translate(0px,0px) rotateZ(1440deg);
background-color: #0ff;
}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
本文地址：https://blog.csdn.net/qq_39664934/article/details/107290712
如对本文有疑问， 点击进行留言回复！！
元素分类，块级元素，内联元素，行内块元素，displaby 属性
网友评论