CSS3 transform变换，案例

最新推荐文章于 2022-03-02 10:53:06 发布
最新推荐文章于 2022-03-02 10:53:06 发布
阅读量341 收藏
点赞数
分类专栏： Html CSS 文章标签： css css3 html 3d less
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1209849629/article/details/105475018
版权
Html 同时被 2 个专栏收录
33 篇文章 0 订阅
订阅专栏
CSS
18 篇文章 0 订阅
订阅专栏

CSS3 transform变换

1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、tranform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见
做变形动画需要设置初始值，不设置容易出现跳变的bug

案例1：设置盒子位移、缩放、旋转、斜切
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>transform</title>
	<style type="text/css">
		
		.box{

			width:200px;
			height:200px;
			border:3px solid #000;
			background-color:gold;
			margin:50px auto 0;

			/* translate位移比定位做的位移性能高，建议使用这种位移 */
			transform:translate(0px,0px);
			transition:all 500ms ease;
		}


		.box:hover{
			transform:translate(30px,30px);
		}


		.box2{

			width:200px;
			height:200px;
			border:3px solid #000;
			background-color:gold;
			margin:50px auto 0;
			transform:scale(1,1);
			transition:all 500ms ease;		
		}

		.box2:hover{
			transform:scale(2,2);
		}


		.box3{
			width:200px;
			height:200px;
			border:3px solid #000;
			background-color:gold;
			margin:50px auto 0;
			transform:rotate(0deg);
			transition:all 500ms ease;		
		}

		.box3:hover{
			transform:rotate(45deg);
		}


		.box4{
			width:200px;
			height:200px;
			border:3px solid #000;
			background-color:gold;
			margin:50px auto 0;
			transform:skew(0,0);
			transition:all 500ms ease;		
		}

		.box4:hover{
			transform:skew(0,45deg);
		}



	</style>
</head>
<body>
	<div class="box"></div>
	<div class="box2"></div>
	<div class="box3"></div>
	<div class="box4"></div>
</body>
</html>
案例2：tranform-origin 设置变形的中心点
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		.box01,.box02,.box03,.box04{
			width:200px;
			height:200px;
			border:3px solid #000;
			background:gold;
			margin:30px;
			float:left;
			transition:all 500ms ease;
		}
		.box02{
			transform-origin:left center;
		}
		.box03{
			transform-origin:left top;
		}
		.box04{
			transform-origin:50px 50px;
		}

		.box01:hover,.box02:hover,.box03:hover,.box04:hover{
			transform:rotate(90deg);
		}


	</style>
</head>
<body>
	<div class="box01"></div>
	<div class="box02"></div>
	<div class="box03"></div>
	<div class="box04"></div>
</body>
</html>
案例3：图片翻转动画
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width:700px;
			height:272px;			
			border:3px solid #000;
			margin:50px auto 0;
			position:relative;
			/* 让容器里面的元素按照3d空间显示（规范写法）  */
			transform-style:preserve-3d;
		}
		.box img{
			position:absolute;
			left:200px;
			top:0;
			transform:perspective(800px) rotateY(0deg);
			transition:all 500ms ease;
			backface-visibility:hidden;
		}		
		.box:hover img{
			transform:perspective(800px) rotateY(180deg);
		}
		.box .back{
			width:300px;
			height:272px;
			background-color:pink;
			position:absolute;
			left:200px;
			top:0;
			font-size:20px;
			text-align:center;
			line-height:272px;
			transform:perspective(800px) rotateY(-180deg);
			transition:all 500ms ease;
			backface-visibility:hidden;
		}
		.box:hover .back{
			transform:perspective(800px) rotateY(0deg);
		}
	</style>
</head>
<body>
	<div class="box">		
		<img src="images/location_bg.jpg" alt="背景图">
		<div class="back">
			图片的说明文字
		</div>
	</div>
</body>
</html>
案例4：三维旋转
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三维旋转</title>
	<style type="text/css">

		/* 	 
			旋转的轴向：

			x轴：从左往右

			y轴：从上往下

			z轴：从屏幕内往外

			判断旋转的方向：让轴向对着自己，顺时针方向


		*/
		
		.box{
			width:300px;
			height:300px;
			background-color:gold;
			border:3px solid #000;
			margin:50px auto 0;
			transform-style:preserve-3d;

			/* 做变形动画需要设置初始值，不设置容易出现跳变的bug */
			transform:perspective(800px) rotateY(0deg);
			transition:all 500ms ease;
		}

		.box:hover{
			transform:perspective(800px) rotateY(45deg);
		}


		.box2{
			width:300px;
			height:300px;
			background-color:gold;
			border:3px solid #000;
			margin:50px auto 0;
			transform-style:preserve-3d;

			/* 做变形动画需要设置初始值，不设置容易出现跳变的bug */
			transform:perspective(800px) rotateX(0deg);
			transition:all 500ms ease;
		}

		.box2:hover{
			transform:perspective(800px) rotateX(45deg);
		}




	</style>
</head>
<body>
	<div class="box"></div>

	<div class="box2"></div>
</body>
</html>
a_Joker_Ling
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS-transform 平面/空间（移动、旋转、缩放、过渡）略解以及示例
NewHouser的博客
10-25 5914
transform: translate(水平移动距离，垂直移动距离);//距离的取值可以是数字或百分比向右向下为正数，向左向上为负数括号内只填一个值，默认为水平方向移动的距离
CSS3 3D transform
cwyp18809的博客
03-25 1079
目录 一、transform简介 1、定义和用法 2、浏览器支持 3、语法 二、 学习步骤 1、 前情提要 2、 什么是3D transform变换 3、 关键点：rotateX, rotateY, rotateZ 4、 perspective属性 5、translateZ告诉你透视位置 6、perspective-origin （1）源点向左偏 （2）源点左偏同时上偏 7、transform-s...
CSS3 Transform实例
weixin_30919571的博客
08-15 155
移动translate<!doctype html> <html> <head> <meta charset="utf-8"> <title>boxshadow</title> <style> .wrapper { width: 20...
Transform的属性及使用
热门推荐
小谭鸡米花的博客
10-23 3万+
前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、transform是什么？ Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 二、transform的属性值 假如有一个盒子，高度两百像素，宽度两百像素，设置一个背景颜色，下面来用这个盒子来观察transform每个属性值的效..
保姆级解读！CSS属性transform变形+2D转换+3D转换实例+代码+解析——Web前端系列学习笔记
weixin_43899069的博客
06-27 709
文章目录transfrom2D转换案例代码效果图元素变形原点3D转换3D转换——案例案例代码 transfrom transform，翻译成中文的含义是“改变，使…变形；转换”，用于向元素应用2D或3D 转换。 transform属性的基本语法如下所示： transform：none | transform-functions; 属性一：默认值为none，适用于内联元素和块元素，表示不进行变形。 属性二：用于设置变形函数，可以是一个或多个变形函数列表。 2D转换 transform-function
css3 transform实现散乱的照片排列特效代码
03-20
在本案例中，“css3 transform实现散乱的照片排列特效代码”就是利用这一特性来创造一个独特且吸引人的相册展示效果。 首先，让我们详细了解一下`transform`属性。在CSS3中，`transform`允许我们在不改变文档流的...
css3 transform旋转属性鼠标悬停3D立体图片旋转显示
11-03
总结，CSS3的`transform`属性和3D变换功能为我们提供了丰富的动态效果，使网页设计更具互动性和视觉吸引力。结合鼠标悬停事件和过渡动画，我们可以轻松创造出各种交互式用户体验，如本文介绍的3D立体图片旋转展示。...
CSS3 transform制作漂亮的照片墙特效
12-13
总结起来，"CSS3 transform制作漂亮的照片墙特效"是一个运用了CSS3的`transform`属性来创建动态照片展示的项目，结合了旋转、缩放和平移等多种变换，通过CSS3的其他特性如`transition`增加交互性，为用户提供一个...
css3 transform属性制作鼠标点击3D图片叠加动画效果
11-24
在网页设计领域，CSS3（层叠样式表第三版）为开发者提供了许多强大的特性，其中transform属性是一个不可或缺的工具，它允许我们对元素进行二维或三维的变换操作，如旋转、缩放、移动和倾斜。本教程将深入探讨如何...
CSS3 3D制作实战案例分析
12-09
同时也欢迎各位小伙伴对文中的错误给予指正 二、入门案例分析 这里先说一说我的规划，我打算先从入门级的案例入手，然后依次递推，最后要达到的效果是，理解完所有的例子的设计思路，基本上CSS3-3D制作就能够...
CSS Transform
小赛赛爱吃肉
04-02 588
2D 变形 使用 transform 属性可以对元素进行旋转、缩放、平移、倾斜 旋转 使用 transform:rotate() 属性来设置元素的旋转 <style> * { margin: 0; padding: 0; } .box { width: 200px; height: 200px...
实训中学到的HTML基础知识（4）
yyyyyang525的博客
06-04 320
实训已经过去一周了，这是实训的第五天，正式上课的第四天，前面三天已经学习了HTML中的基本主体标签知识和CSS样式表，今天学习了CSS样式表里的trans是学习新的知识：JS（JavaSc
css转换（transform）
qq_37899792的博客
05-23 1510
一、转换简介 1、什么是转换 改变元素在页面中的大小，位置，角度和形状的一种方式 2、转换分类 ①、2D转换 使元素在x轴和y轴上发生变化效果 ②、3D转换 在2D转换基础上，增加 z轴的变化效果 3、转...
CSS transform-style属性使用案例
zbailing的博客
03-02 285
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS transform-style属性使用案例</title> <style> /* 当父元素应用transform时，子元素也会随之改变效果 */ .box1 { ...
css3 transform 平移,transform
weixin_29056781的博客
08-03 549
不得不提到CSS3的transform，也就是变换。这篇文章概括了在实现时对transform的理解与总结。注：文中的图片多数截取自视频：线性代数的本质...3小时前改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix...2016年12月12日延迟时间)。figcaption标签，一般应用于图片...
CSS--transform(转换)--使用/教程/实例
IT利刃出鞘的博客
12-25 903
本文用示例介绍CSS中的transform（转换）的用法。 CSS3 transform可以对元素进行移动、缩放、转动、拉长、拉伸。
CSS3实现整屏切换效果
根是地下的枝
07-02 6634
总是能看见很多广告或者网站都是使用整屏滚动的效果，一直看着都心痒痒，想自己也实现一个。最近刚学习到css3的动画效果，所以尝试使用css3做了一个整屏切换。页面结构实现思路与大众方法类似，如图 每个section就是一页内容，它的大小充满了屏幕（红色区域），一个container由多个section构成，我们通过改变container的位置，来达到页面切换的效果。container向下走，页面
html中transform示例
行善之人必有余庆
05-27 2096
transform function draw(id) { var canvas=document.getElementById(id); var context=canvas.getContext('2d'); var colors=["red", "orange", "yellow", "green", "blue", "navy", "purple"]; contex
CSS3特效：2D转换&小案例
小头Sophia
12-28 2064
一、2D转换之移动 1.transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 2. translate(x,y)        //定义2D转换 3.示例： html> lang="en"> charset="UTF-8"> Special Effect div{

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值