css3-3D变形transform的练习，关于HTML的进一步学习和深刻了解。。。也是看到前面的知识，精心的了解，慢慢去摸透其中的奥秘！

最新推荐文章于 2021-06-20 00:04:21 发布

程序员ouyangwangchu

最新推荐文章于 2021-06-20 00:04:21 发布

阅读量234

点赞数

分类专栏： HTML 文章标签： html css css3 html5 运维

本文链接：https://blog.csdn.net/ldj2222/article/details/106289173

版权

HTML 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

在

进行对于页面的设计时，我们常常需要图片进行互动和翻转，给我们带来不一样的视觉体验！

这样也让页面变得更加的灵动活泼！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3D变形transform练习2</title>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			position: relative;
			margin: 50px auto;
			border: 5px solid #000;
			transition: all 1s ease;
			perspective:: 50000px;
			transform-style: preserve-3d;
		}
		div:hover{
			transform: rotateX(-90deg);
		}
		div img{
			position: absolute;
			top: 0;
			left: 0;
		}
		div img.no1{
			transform: rotateZ(100px);
		}
		div img.no2{
			transform: rotateX(90deg);
		}
	</style>
</head>

<body>
	<div>
		<img class="no1" src="images/1.png" alt="1">
		<img  class="no2" src="images/2.png" alt="2">
	</div>
</body>
</html>

看上去是并不难的，但是自己还是要好好看一下，有没有冲突，代码的每个涵义，自己要认真了解！！！
效果图片，但是不是动的，感兴趣的小伙伴，可以自己试试看，还是挺不错的哦！

文章分析就到这里，谢谢你的阅读，

程序员ouyangwangchu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3-3D变形transform的练习，关于HTML的进一步学习和深刻了解。。。也是看到前面的知识，精心的了解，慢慢去摸透其中的奥秘！

在进行对于页面的设计时，我们常常需要图片进行互动和翻转，给我们带来不一样的视觉体验！这样也让页面变得更加的灵动活泼！<!doctype html><html><head><meta charset="utf-8"><title>3D变形transform练习2</title> <style type="text/css"> div{ width: 200px; height: 200px;
复制链接

扫一扫