CSS转换（2D）transform属性及animation动画

news2024/11/15 11:09:14

1、倾斜效果，旋转效果

<style type="text/css">
.transrorm_bar{ padding:150px; display: flex; align-items: center;}
.transrorm_bar div{ width: 120px; height: 120px; background-color: #eee; margin: 10px; display: flex; align-items: center; justify-content: center;}
.transrorm_bar div:nth-child(2){ transform: skewY(15deg);}
.transrorm_bar div:nth-child(3){ transform: skewX(15deg);}
.transrorm_bar div:nth-child(4){ transform:rotate(15deg);}
.transrorm_bar div:nth-child(5){ transform:rotateX(45deg);}
.transrorm_bar div:nth-child(6){ transform:rotateY(45deg);}
</style>
<div class="transrorm_bar">
	<div>正常效果</div>
	<div>Y倾斜15度</div>
	<div>X倾斜15度</div>
	<div>旋转15度</div>
	<div>X轴旋转45度</div>
	<div>Y轴旋转45度</div>
</div>

在这里插入图片描述
X和Y旋转可配合perspective 属性，实现透视效果

2、rotateX()，rotateY()配合perspective实现的效果

<style type="text/css">
.transrorm_con{position: relative; margin-left: 100px; border: 1px solid #000; width: 102px; height: 102px; display: flex; align-items: center; justify-content: center; perspective:200; -webkit-perspective:200;}
.transrorm_con div{ width: 100px; height: 100px; background-color: #eee; display: flex; align-items: center; justify-content: center; transition: 1s;}
.transrorm_con:hover div:nth-child(1){transform:rotateY(-135deg); transform-origin:0% 100%;}
</style>
<div class="transrorm_con">
	<div>旋转-135度</div>
</div>

在这里插入图片描述
transform属性浏览器支持参考下图

transform属性官网详解

3、transform-origin的用法及效果

transform-origin：改变被转换元素的位置，2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴；transform-origin默认50% 50%

.transrorm_con{position: relative; margin-left: 120px; border: 1px solid #000; width: 102px; height: 102px; display: flex; align-items: center; justify-content: center;}
.transrorm_con div{ width: 100px; height: 100px; background-color: #eee; display: flex; align-items: center; justify-content: center; transition: 1s;}
.transrorm_bar3 div:nth-child(1){transform:rotate(90deg);}
.transrorm_bar4 div:nth-child(1){transform:rotate(180deg); transform-origin:0% 50%;}
.transrorm_bar5 div:nth-child(1){transform:rotate(180deg); transform-origin:50% 0%;}
.transrorm_bar6 div:nth-child(1){transform:rotate(90deg);  transform-origin:100% 100%;}
.transrorm_bar7 div:nth-child(1){transform:rotate(90deg);  transform-origin:0% 100%;}

在这里插入图片描述

浏览器支持情况如下：
在这里插入图片描述
transform-origin属性官网详解

4、CSS transition 属性过渡效果设置

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property：规定设置过渡效果的 CSS 属性的名称，默认值all（所有属性），none（无属性），property（例：width，left，right等等具体属性名）
transition-duration：规定完成过渡效果需要多少秒或毫秒；默认0s
transition-timing-function：规定速度效果的速度曲线；默认ease（慢速开始，然后变快，然后慢速结束的过渡）；linear（相同速度）；ease-in（慢速开始）；ease-out（慢速结束）；ease-in-out（慢速开始和结束）
transition-delay：定义过渡效果何时开始；过渡效果开始之前需要等待的时间，默认0

transition属性官网参考

5、CSS animation 属性，动画属性

/*水波纹效果*/
/* 波纹 */
.state_mark_rankH_item{
	position: absolute;
	left: 0px;
	bottom: 0px;
	right: 0px;
	top:16px;
	background-color: #efdc71;
}
.state_mark_rankH_wave,.state_mark_rankH_wave2,.state_mark_rankH_wave3{
	position: absolute;
	left: -257px;
	right: 0px;
	top: 0px;
	height: 13px;
	background: url(images/wave.png) top center no-repeat;
	background-size:auto 13px;
}
.state_mark_rankH_wave{
	animation: wave 4.5s infinite linear;
	top: 3px;
}
.state_mark_rankH_wave2{
	animation: wave2 3.8s infinite linear;
	opacity:0.5;
	left: -315px;
}
.state_mark_rankH_wave3{
	animation: wave3 3.8s infinite linear;
	opacity:0.3;
	left: -280px;
}
@keyframes wave{
	0%{ left: -257px;}
	100%{ left: 0px;}
}
@keyframes wave2{
	0%{ left: -315px; }
	100%{ left: -54px;}
}
@keyframes wave3{
	0%{ left: -280px; }
	100%{ left: -18px; }
}