css之3D效果（二）

最新推荐文章于 2022-07-09 17:01:59 发布

周朝兵

最新推荐文章于 2022-07-09 17:01:59 发布

阅读量152

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/m0_45251955/article/details/103963721

版权

css3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、平移

平移有三个方法，分别为：
translateX();
translateY();
translateZ();
它平移的距离是相对于自身平移的，还可以将这三个方法写在一起reanslate3D(x,y,z,px);用一个方法来代替，效果是一样的，好了，我们先来看代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
	.div{
		width: 300px;
		height: 300px;
		background-color: red;
		margin: 0 auto;
		margin-top: 300px;
	}
	.div:hover{
		transform:translateX(180px);
	}
</style>
<body>
	<div class="div">这是一个div</div>
</body>
</html>

原图：
在这里插入图片描述
效果图：

这样看起来好像和2d的平移没什么区别，那么现在再来看看下面这个：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
	.div{
		width: 300px;
		height: 300px;
		background-color: red;
		margin: 0 auto;
		margin-top: 300px;
		transition: 2s;
	}
	.div:hover{
		transform:skewY(45deg) translateX(180px);
	}
</style>
<body>
	<div class="div">这是一个div</div>
</body>
</html>

在这个中我添加了过度效果以及偏移效果，这两个方法在前面的博客中已近提到过，在这里就不在多说了，接下来我们来看看效果图是什么样的：
在这里插入图片描述
可以发现，该div不仅发生了偏移，还发生了平移，有不理解的小伙伴可以将代码复制后自己打印，效果会更强烈。

2、景深

景深是什么意思呢，简单来讲就是你视角看一个物体的方向以及角度和距离，它有两个属性，分别为：
perspective：
perspective-origin：

perspective表示你眼睛距离物体的距离，随着值得增大而减小，perspective-origin表示你眼睛看物体的方位，有两个值，分别表示x轴和y轴，通过坐标来改变你眼睛看物体的方向，还是先来看看代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
	body{
		perspective:600px;
		perspective-origin: 500px 200px;
	}
	.div{
		width: 300px;
		height: 300px;
		background-color: red;
		margin: 0 auto;
		margin-top: 300px;
		transition: 2s;
		
	}
	.div:hover{
		transform:skewY(45deg) translateZ(180px);
	}
</style>
<body>
	<div class="div">这是一个div</div>
</body>
</html>

这里需要注意的是景深需定义在父元素上，如果定义在本身会没有效果，来看看效果图：
在这里插入图片描述
这样看可能效果并不明显，还是需要自己运行一下，看一下改变的过程，多换几个值就会明白了。

周朝兵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css之3D效果（二）

1、平移平移有三个方法，分别为：translateX();translateY();translateZ();它平移的距离是相对于自身平移的，还可以将这三个方法写在一起reanslate3D(x,y,z,px);用一个方法来代替，效果是一样的，好了，我们先来看代码：<!DOCTYPE html><html lang="en"><head> &l...
复制链接

扫一扫