css3的变换效果动画效果

最新推荐文章于 2021-08-04 02:36:23 发布

我就呵呵了。。。

最新推荐文章于 2021-08-04 02:36:23 发布

阅读量245

点赞数

文章标签：变换效果 css3

本文链接：https://blog.csdn.net/qq_37244548/article/details/106385379

版权

本文详细介绍了CSS3中的变换效果，包括平移动画、缩放动画、旋转动画以及skew()方法的应用，展示了丰富的视觉效果。

摘要由CSDN通过智能技术生成

一，平移动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>变换效果</title>
		<style>
			/**
			 * transform主要用来实现变换效果
			 1--平移动画 translate				 
			 */
			.box{
				width: 300px;
				height: 300px;
				border: 1px solid forestgreen;
				/* 变换  translate(100px,100px) ;括号里面是是(x,y)一个div默认的左上点就是(0,0)然后相对(0,0)进行平移* /
				transform:translate(100px,100px) ;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

二缩放动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>变换效果</title>
		<style>
			/**
			 * transform主要用来实现变换效果
			 1--平移动画 translate				 
			 */
			.box{
				width: 300px;
				height: 300px;
				border: 1px solid forestgreen;	
							/* x ，y 都扩大一倍 */
				transform:scale(2

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

我就呵呵了。。。

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3的变换效果动画效果

一，平移动画<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>变换效果</title> <style> /** * transform主要用来实现变换效果 1--平移动画 translate */ .box{ width: 300px; height: 300px;
复制链接

扫一扫