HTML-从零开始的学习过程（13）

最新推荐文章于 2024-05-17 11:15:23 发布

Dokey_L

最新推荐文章于 2024-05-17 11:15:23 发布

阅读量211

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/Dokey_L/article/details/106746853

版权

CSS3转换

transform属性，让一个元素在坐标系统中变形，这个属性会包含一系列的变形函数，可以移动，旋转和缩放元素；
兼容性：ie10+ 、 firefox16、 chrome36 、 safari9 、opera12.1；

2D转换

旋转rotate

通过指定的角度对原元素指定一个2D的旋转；
语法：transform:rotate(< angle>)；
参数说明：
1. angle指定角度；
2. 正数表示顺时针旋转；
3. 负数表示逆时针旋转；

移动translate

translateX（x） – 仅仅水平方向移动（X轴移动）
参数值说明：
数值可以改变大小；
left right无效果；
%可以用；
em单位可以用；
translateY（y） – 仅仅垂直方向移动（Y轴移动）
参数值说明：
- 数值可以改变大小；
- left right无效果；
- %可以用；
- em单位可以用；
translate（x，y） – 水平方向和垂直方向同时移动（X轴移动和Y轴移动）
参数值说明：
- X轴的值必须填写的；
- Y轴值可填可不填，如果不填写默认是0；

缩放scale

scaleX()元素水平方向缩放
使用[sx,1]缩放矢量执行缩放操作的，sx为所需参数；
语法：transfrom: scaleX(< number>)；
参数说明：
- .5表示 0.5 代表以中心为原点进行百分之50的缩小；
- 设置比1大的值,表示放大；
- 设置为0图片显示无；
scaleY()元素垂直方向缩放
使用[1,sy]缩放矢量执行缩放操作的，sy为所需参数
语法：transfrom: scaleY(< number>)；
参数说明：
- .5表示 0.5 代表以中心为原点进行百分之50的缩小；
- 设置比1大的值,表示放大；
- 设置为0图片显示无；
scale(x,y)元素水平方向和垂直方向同时缩放
使用[sx,sy]缩放矢量的两个参数指定一个2D缩放；
语法：transfrom: scale([< number>])；
参数说明：
- .5表示 0.5 代表以中心为原点进行百分之50的缩小；
- 设置比1大的值,表示放大；
- 设置为0图片显示无；
- 两个参数说明x和y都进行比例缩放，一个参数说明x和y同时进行等比例缩放；

扭曲skew

skewX(x)元素在水平方向扭曲变形
按给定的角度沿着X轴指定一个斜切变换；
语法：transform: skewX(角度)；
参数说明：
- 正值：逆时针；
- 负值：顺时针；
- -90deg到90deg是正确的取值范围；
skewY(y)元素在垂直方向扭曲变形
按给定的角度沿着Y轴指定一个斜切变换；
语法：transform: skewY(角度)；
参数说明：
- 正值：顺时针；
- 负值：逆时针；
- -90deg到90deg是正确的取值范围；
skew(x,y)元素在水平方向和垂直方向扭曲变形
按给定的角度沿着Y轴和X轴指定一个斜切变换；
语法：transform: skew(角度,[角度])；

3D转换

旋转rotate X()

指定对象在X轴方向的旋转角度；
语法;transform： rotateX(angle)；

旋转rotate Y()

指定对象在Y轴方向的旋转角度；
语法;transform： rotateY(angle)；

旋转rotate Z()

指定对象在Z轴方向的旋转角度；
语法;transform： rotateZ(angle)；

旋转rotate 3d()

指定对象的3D旋转角度；
语法;transform： rotate(x,y,z,angle)；
前三个参数分别表示旋转方向x,y,z，第四个参数表示旋转的角度，参数不允许省略；
建议取值的范围：
- x:0-10；
- y:0-10；
- z；0-10；
- angle：-360deg-360deg；

移动translateZ

指定对象的Z轴的平移；
语法：transform：translateZ（）；
参数对应Z轴，不允许省略；
发现改变值没有变化，注意设置5px表示向屏幕来了5个像素，负值类似；

移动translate3d

指定对象的3D位移；
语法：transform：translate3d（x,y,z）；
参数对应各个轴，参数不允许省略；

缩放scaleZ()

指定对象的Z轴的缩放；
语法：transform：scaleZ()；
参数对应Z轴，不允许省略；
没有任何变化，但是厚度发生了改变；

缩放scale3d()

指定对象的3d缩放；
语法：transform：scale3d(x,y,z)；
参数对应各个轴，不允许省略；
三个值缺一不可，少一个的话将不再显示；

transform和坐标系统

transform-origin属性

此属性允许更改转换元素的位置。
语法：transform-origin： x y z；
参数：可以设置百分比也可以设置类似：left top；

perspective属性

指定观察者与[z=0]平面的距离,使得具有三维位置变化的元素产生透视的效果；
语法： number – 元素距离试图的距离，以像素计 | none – 与0一样，不设置透视；
默认值：none；
说明：越趋近于0相当于我们靠近屏幕越近，等于0效果显示；负数没有任何效果，但是数值越大的话表示我们越从更高的地方看下去，数值特别大的话，效果不明显的。

perspective-origin属性

指定透视点的位置；
语法：x-axis y-axis；
默认值：： 50% 50%；
参数值：
- x-axis – 定义该视图在X轴上的位置
  left；
  center；
  right；
  length – 数值；
  % – 百分比；
- y-axis – 定义该视图在y轴上的位置
  top；
  center；
  bottom；
  length – 数值；
  % – 百分比；

backface-visibility属性

指定元素背面面向用户时是否看见；
语法：visible – 背面是可见的 | hidden – 背面是不可见的；
默认值：visible – 类似透明的效果；

示例：骰子效果

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>cube</title>
	<style type="text/css">
		body{
			perspective: 800px;
			/*transform-origin此属性允许更改转换元素的位置*/
			perspective-origin: 50% 50%;
		}
		.cube{
			width: 100px;
			height: 100px;
			/*transform-style指定嵌套元素是怎样在三维空间呈现的*/
			/*transform-style: flat  --  表示所有子元素在2d呈现  |   preserve-3d  --  表示所有子元素在3d呈现*/
			-webkit-transform-style:preserve-3d;
			transform-style:preserve-3d;
			margin: 50px;
			/*inline-block行内块元素*/
			/*inline元素会被设置成行内元素，没有换行符*/
			display: inline-block;
		}
		.cube > div{
			width: 100%;
			height: 100%;
			background-color: rgba(255,255,255,0.2);
			color: grey;
			line-height: 100px;
			text-align: center;
			box-shadow: inset 0 0 15px rgba(0,0,0,0.2);
			position: absolute;
		}
		.front{
			transform: translateZ(50px);
		}
		.back{
			/*transform是复合属性，几种转换可以写在一起*/
			transform: rotateY(-180deg)  translateZ(50px) ;
		}
		.right{
			transform: rotateY(90deg) translateZ(50px);			

		}
		.left{
			transform: rotateY(-90deg) translateZ(50px);

		}
		.top{
			transform: rotateX(90deg) translateZ(50px);

		}
		.bottom{
			transform: rotateX(-90deg) translateZ(50px);

		}
		/*.cube{
			transform: rotate3d(1,1,1,30deg);
		}*/
		.c1{
			backface-visibility: visible;
		}
		.c2{
			-webkit-backface-visibility: hidden;
		}
	</style>
</head>
<body>
	<div class="cube c1">
		<div class="front">1</div>
		<div class="back">2</div>
		<div class="right">3</div>
		<div class="left">4</div>
		<div class="top">5</div>
		<div class="bottom">6</div>
	</div>
	<div class="cube c2">
		<div class="front">1</div>
		<div class="back">2</div>
		<div class="right">3</div>
		<div class="left">4</div>
		<div class="top">5</div>
		<div class="bottom">6</div>
	</div>
</body>
</html>

Dokey_L

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML-从零开始的学习过程（13）

CSS3转换transform属性，让一个元素在坐标系统中变形，这个属性会包含一系列的变形函数，可以移动，旋转和缩放元素；兼容性：ie10+ 、 firefox16、 chrome36 、 safari9 、opera12.1；2D转换旋转rotate通过指定的角度对原元素指定一个2D的旋转；语法：transform:rotate(< angle>)；参数说明：angle指定角度；正数表示顺时针旋转；负数表示逆时针旋转；移动translatetrans
复制链接

扫一扫