css 转换变形动画

最新推荐文章于 2024-07-24 13:52:24 发布

m0_56476250

最新推荐文章于 2024-07-24 13:52:24 发布

阅读量70

点赞数

分类专栏：布局文章标签： css

本文链接：https://blog.csdn.net/m0_56476250/article/details/115956634

版权

布局专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.space1{
				height: 100px;
				width: 200px;
				position: relative;
				-webkit-perspective: 800;
				margin:20px auto;
				background-color: #0000FF;
			}
			.space1:hover~.space3{
				-webkit-transform: rotateY(180deg);
				border:10px solid #FF7F50;
				-webkit-transition: 1s;
			}
			.space2{
				width: 100%;
				height: 15em;
				background-color: darkgreen;
				-webkit-transform-style: preserve-3d;
				-webkit-transition: 1s;

			}
		   .space3{
			   width: 200px;
			   height: 200px;
			   margin:auto auto;
		   }
			.space3>img{
				margin: 10px auto;
			}	
			@-webkit-keyframes jkl{
				from{
					/* -webkit-transform: rotateY(0deg);  */               /* 旋转 */
					/* -webkit-transform: translate(50px,100px); */            /* 平移 */
					/* -webkit-transform:skew(0deg,0deg); */                /*倾斜 */
					-webkit-transform:scale(0,0);                             /* 缩放 */
				}
				to{
					/* -webkit-transform: translate(500px,1000px); */
					/* -webkit-transform:rotate(360deg); */
					/* -webkit-transform:skew(10deg,10deg); */
					-webkit-transform:scale(1,1);
				}
			}
			.space5{
				width:500px;
				height:500px;
				background:red;
				margin: 10px auto;
				-webkit-animation: jkl 3s infinite linear;     /* 动画效果 */
			}
			
		</style>
	</head>
	<body>
		<div class="space1"></div>
		<div class="space2"></div>
		<div class="space3">
			<img src="./img/11.jpg" alt="" width="100px">
		</div>
		<div class="space4">
			<h1>我在岭南师范学院读书</h1>
		</div>
		<div class="space5">
			
		</div>
	</body>
</html>

m0_56476250

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 转换变形动画

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .space1{ height: 100px; width: 200px; position: relative; -webkit-perspective: 800; margin:20px auto; b
复制链接

扫一扫