CSS3 transform-style 3D旋转特效

2024-09-05 12:19:03

字体：大中小

来源：转载

供稿：网友

两个Div叠加在一起，并自动旋转，这里主要使用CSS3中的 transform-style属性来实现3D旋转，并利用CSS3优势轻松实现动态旋转，像Flash一样，根据代码中的注释，你会明白如何执行X轴和Y轴方向上的360动画旋转的实现。

<!DOCTYPE html><html><head><title>transform-style的3D旋转效果-Div旋转</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.3;    -webkit-transform-style: preserve-3d;    -webkit-animation: spin 15s 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>CSS3旋转特效</div>      <div>Div旋转效果，基于CSS3</div>    </div>  </div></body></html>

上一篇：HTML5雨滴特效，晶莹剔透

下一篇：HTML5绘制星空