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   class="iwvjtn8m0"   id="container">    <div   class="iwvjtn8m0"   id="parent">      <div>CSS3旋轉特效</div>      <div>Div旋轉效果，基于CSS3</div>    </div>  </div></body></html>

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

下一篇：HTML5繪制星空