css3 transform+折扇案例+魔方案例

最新推荐文章于 2022-06-05 11:30:00 发布

懵吕_Larissa

最新推荐文章于 2022-06-05 11:30:00 发布

阅读量191

点赞数

本文链接：https://blog.csdn.net/weixin_38730820/article/details/105037741

版权

css3 2D属性

			变形属性 transform:;

2D变换:

			在平面空间的位移transform:translate();
			旋转           transform:rotate();
			缩放           transform:scale();
			倾斜           transform:skew();

位移:

	 transform:translate(水平位移,垂直位移);
	 transform:translate(水平位移);
		
	*单一方向的位移:*
		transform:translateX(水平位移);
		transform:translateY(垂直位移);
		
		
	*默认情况:*
		正值:从上往下,从左往右
		负值:从下往上,从右往左

缩放：

        transform:scale(水平垂直都缩放);
		取值范围  0-0.9999999   缩小
					  =1 原来大小
					  >1 放大
			transform:scale(水平缩放 垂直缩放);
			transform:scaleX(水平缩放);
			transform:scaleY(垂直缩放);

旋转:

		transform:rotate();旋转是一个度数deg
		默认情况 中心店为旋转点

         旋转基点:
		 transform-origin:水平值 垂直值;
		 1:默认中心点
		 left right top bottom
		 2:具体像素值

为了让上述效果平滑实现，可以在对象元素中加入过渡

过渡:
让元素的动画以平滑的效果出现,而不是生硬直接的效果.
1:什么属性在做动画transition-property:属性1,属性2,…属性n;
2:过渡需要多久transition-duration:2s;
3:等待时间(可选) transition-delay
4:动画类型(默认)transition-timing-function
linear 匀速
5:综合写法:transition:属性过渡时间延迟时间运动类型;

案例：

位移案例：鼠标移入，实现文本的动画效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
   margin:0;padding:0;}
			.box{
   
				width:500px;
				height:400px;
				background:pink;
			}
			.txt1{
   
				background:red;
				color:#fff;
				/* font-size:20px; */
				font-weight:bold;
				transform:translateY(20px);
				transition:1s;
				opacity:0;
			}
			.txt2{
   
				background:blue;
				color:#fff;
				/* font-size:20px; */
				font-weight:bold;
				transform:translateY(300px);
				transition:5s;
				opacity:0;
			}
			.box:hover .txt1{
   
				transform:translateY(60px);
				opacity:1;
			}
			.box:hover .txt2{
   
				transform:translateY(200px);
				opacity:1;
				font-size:20px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<p class="txt1">我很高贵</p>
			<p class="txt2">男人没有机会</p>
		</div>
	</body>	
</html>

缩放案例：案例思路:
1:基本布局结构 txt1和txt2通过定位互相堆叠,使用边框
2:初始状态缩小为0
3:鼠标移入放大到原来的1倍
4:加上过渡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
   
				width:500px;
				height:500px;
				/* background:red; */
				margin:100px;
				border:10px solid yellow;
				overflow:hidden;/* 在框里放大缩小 */
				position:relative;
			}
			.box img{
   
				display:block;
				width:500px;
				height:500px;
				transition:1s;
			} 
			 .box:hover img{
   
				transform:scale(1.5);
			} 
			.txt1{
   
				height:400px;
				width:400px;
				/* background:pink; */
				border-left:3px solid #

最低0.47元/天解锁文章

懵吕_Larissa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 transform+折扇案例+魔方案例

css3 2D属性变形属性 transform:;2D变换: 在平面空间的位移transform:translate(); 旋转 transform:rotate(); 缩放 transform:scale(); 倾斜 transform:skew();位移: transform:transla...
复制链接

扫一扫