css3 动画岩Y周5旋转

最新推荐文章于 2023-11-26 00:00:00 发布

红烧茄子蛋炒饭

最新推荐文章于 2023-11-26 00:00:00 发布

阅读量335

点赞数

分类专栏： css CSS3动画文章标签： css3动画图片旋转动画沿Y轴旋转

本文链接：https://blog.csdn.net/qq_41229582/article/details/102367461

版权

css 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

CSS3动画

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<title>transform-style实现Div的3D旋转</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
*{font-size: 24px;color: #00ff00; padding:0; margin:0;}
#container {
position: relative;
height: 300px;
width: 300px;
-webkit-perspective: 500;
margin-top: 200px;
margin-right: auto;
margin-left: auto;
border: 1px solid red;
}
#parent-keleyi-com {
margin: 10px;
width: 280px;
height: 280px;
background-color: #666;
opacity: 0.3;
-webkit-transform-style: preserve-3d;
-webkit-animation: spin 5s infinite linear; // infinite 无限旋转可改成次数
}
/*执行Y轴旋转360度动画*/
@-webkit-keyframes spin {
from {-webkit-transform: rotateY(0);}
to {-webkit-transform: rotateY(360deg);}
}
</style>
</head>
<body>
<div id="container">
<div id="parent-keleyi-com">
</div>
</div>
</body>
</html>