css3动效二：transform 2D /3D 转换属性

最新推荐文章于 2024-04-17 01:37:33 发布

差不少

最新推荐文章于 2024-04-17 01:37:33 发布

阅读量406

点赞数 1

分类专栏：基础前端 3d css3 动效旋转 2d 文章标签： 3d 旋转动效 transform css3

本文链接：https://blog.csdn.net/c62387723sq/article/details/89680057

版权

基础同时被 3 个专栏收录

69 篇文章 1 订阅

订阅专栏

前端

68 篇文章 1 订阅

订阅专栏

css3

5 篇文章 0 订阅

订阅专栏

transform 2D /3D 转换属性

transform-origin
更改元素旋转基点
注：默认基点是元素的正中心

2D：
效果主要针对的是页面当中的x轴和y轴进行的一系列的元素变化。

写法属性：方法（属性在前方法在后）
示例：transform:ratate(10deg)

属性：

translate(x,y)
沿着x y 移动元素/ translateX(n) translateY(n)

scale(x,y)
缩放
更改元素的宽度和高度 ,将宽度改为原来的x倍，高度改为原来的y倍

scaleY(n)
更改高度

scaleX(n)
更改宽度

rotate(angle)
旋转角度（角度一定要写deg）

skew(x-angle,y-angle)
定义2D 倾斜转换沿着x轴和y轴

skewY(angle)
沿着y轴转换

skewX(angle)
沿着x轴

2D旋转示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box {
				width: 100px;
				height: 100px;
				background-color: red;
				transition: 1s;
			}
			.box:hover {
				transform: rotate(360deg);
			}
		</style>
		<link rel="stylesheet" href="01.css">
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

3D：

属性：

transform-style
开启3D空间

perspective
视距

perspective-origin
景深基点

backface-visibibility
背面隐藏

方法：

scale3d(x,y,z)

scaleX

scaleY

scaleZ

CSS3 3D变形中的缩放主要有scaleZ()和scale3d()两种函数，当scale3d()中X轴和Y轴同时为1，即scale3d(1,1,sz)，其效果等同于scaleZ(sz)。通过使用3D缩放函数，可以让元素在Z轴上按比例缩放。默认值为１，当值大于１时，元素放大，反之小于１大于0.01时，元素缩小。

rotate3d(x,y,z,angle)

rotateX(angle)

rotateY(angle)
沿着该轴环绕式旋转 y轴旋转轨迹与陀螺旋转相同，以此类推

rotateZ(angle)

x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转

3D立方体旋转示例：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>正方体</title>
	<style>
		* {margin:0;padding: 0;}
		ul li {list-style: none;}
		ul {
			width: 200px;
			height: 200px;
			margin:100px auto;
			position: relative;
			transition: 6s;
			transform-style: preserve-3d;
			/* border:1px solid red; */
		}
		ul li {
			width: 100%;
			height: 100%;
			text-align: center;
			line-height: 200px;
			color:red;
			font-size:40px;
			position: absolute;
		}
		
		ul li:nth-child(1) {
			transform: rotateX(0deg) translateZ(100px);
			background: rgba(255,0,0,.6);
		}
		ul li:nth-child(2) {
			transform: rotateX(-90deg) translateZ(100px);
			background: rgba(0,255,0,.6);		
		}
		ul li:nth-child(3) {
			transform: rotateX(-180deg) translateZ(100px);
			background: rgba(0,0,255,.6);		
		}
		ul li:nth-child(4) {
			transform: rotateX(-270deg) translateZ(100px);
			background: rgba(0,255,255,.6);		
		}
		ul li:nth-child(5) {
			transform: rotateY(90deg) translateZ(100px);
			background: rgba(255,255,255,.6);		
		}
		ul li:nth-child(6) {
			transform: rotateY(-90deg) translateZ(100px);
			background: rgba(255,255,0,.6);		
		}
		ul:hover {
			transform: rotateX(360deg) rotateY(360deg);
		}
	</style>
</head>
<body>
	<ul>
		<li>第一个盒子</li>
		<li>第二个盒子</li>
		<li>第三个盒子</li>
		<li>第四个盒子</li>
		<li>第五个盒子</li>
		<li>第六个盒子</li>
	</ul>
</body>
</html>

差不少

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3动效二：transform 2D /3D 转换属性

transform 2D /3D 转换属性transform-origin更改元素旋转基点注：默认基点是元素的正中心2D：效果主要针对的是页面当中的x轴和y轴进行的一系列的元素变化。写法属性：方法（属性在前方法在后）示例：transform:ratate(10deg)属性：translate(x,y)沿着x y 移动元素/ translateX(n) translat...
复制链接

扫一扫