一个旋转的CSS3 transform-style3D效果

2020-01-27 14:17:34

字体：大中小

来源：转载

供稿：网友

一个旋转的CSS3 3D效果展示，让一个层作旋转运动，看上去有3D效果，实现代码精简过了，看上去不算复杂，有助于CSS3学者参考。

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>transform-style的3D效果测试</title><style>*{font-size: 14px;color: #fff; padding:0; margin:0;}#container {	position: relative;	height: 300px;	width: 300px;	-webkit-perspective: 500;	margin-top: 200px;	margin-right: auto;	margin-left: auto;}#parent {	margin: 10px;	width: 280px;	height: 280px;	background-color: #666;	opacity: 0.8;	-webkit-transform-style: preserve-3d;	-webkit-animation: spin 5s infinite linear;}#parent > div {	position: absolute;	top: 40px;	left: 40px;	width: 280px;	height: 200px;	padding: 10px;	-webkit-box-sizing: border-box;}#parent > :first-child {	background-color: #000;	-webkit-transform: translateZ(-100px) rotateY(45deg);}#parent > :last-child {	background-color: #333;	-webkit-transform: translateZ(50px) rotateX(20deg);	-webkit-transform-origin: 50% top;}	/*执行Y轴旋转360度动画*/@-webkit-keyframes spin {	from {-webkit-transform: rotateY(0);}	to {-webkit-transform: rotateY(360deg);}}</style></head>  <body>  <div id="container">    <div id="parent">      <div>错新网提供编程源码、网站源码、网页素材、书籍教程、网站模板、网页特效代码等，做有质量的学习型源码下载站。</div>    </div>  </div></body></html>

上一篇：CSS3幻灯片-3d荷叶窗图片切换

下一篇：CSS3制作分步注册表单

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注