閱讀976 返回首頁    go 阿裏雲 go 技術社區[雲棲]

CSS3D效果

效果如本博客中右邊呢個淺色框框，來自webpack首頁(IE繞路0_0)

github地址：https://wjf444128852.github.io/demo02/css3/css3d/

思路：

1、關鍵是父元素ul的這2個屬性

  a:transform-style: preserve-3d; 

  b:transform: rotateX(-33.5deg) rotateY(45deg);

讓ul先有點偏移旋轉的效果！

2、分別讓每個li相對於ul前後左右上下位移一定距離是li寬度的一半，6個麵上的li的背景色是從中間向四周的漸變色

3、最下麵的li當作陰影，需要特殊處理

4、定義動畫幀讓ul執行注意animation的參數和兼容性

/*animation: name duration timing-function delay iteration-count direction;*/
/*name 規定需要綁定到選擇器的 keyframe 名稱。。*/
/*duration 規定完成動畫所花費的時間，以秒或毫秒計。*/
/*timing-function 規定動畫的速度曲線。*/
/*delay 規定在動畫開始之前的延遲。*/
/*iteration-count 規定動畫應該播放的次數。*/
/*direction 規定是否應該輪流反向播放動畫。*/

擼碼如下

HTML

複製代碼
<div class="will_rotate">
        <ul class="rotate_parent">
            <li class="tip_front"></li>
            <li class="tip_back"></li>
            <li class="tip_right"></li>
            <li class="tip_left"></li>
            <li class="tip_top"></li>
            <li class="tip_bottom"></li>
            <li class="tip_floor"></li>
        </ul>
   </div>
複製代碼

CSS

複製代碼
.will_rotate{
    width: 150px;
    height: 150px;
    margin: 0 auto;
    position: relative;
}
.rotate_parent, .rotate_parent li {
    position: absolute;
    display: block;
}
.rotate_parent{
    width: 100%;
    height: 100%;
    padding: 0;
    /*margin: -50px 0;*/
    -webkit-transform-origin: 50px 50px;
    transform-origin: 50px 50px;
    -webkit-transform: rotateX(-33.5deg) rotateY(45deg);
    transform: rotateX(-33.5deg) rotateY(45deg);
    -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d; 
     -webkit-animation: willRotate 3s ease-in-out infinite 2s; 
     animation: willRotate 3s ease-in-out infinite alternate; 
     /*animation: name duration timing-function delay iteration-count direction;*/
        /*name    規定需要綁定到選擇器的 keyframe 名稱。。*/
           /*duration    規定完成動畫所花費的時間，以秒或毫秒計。*/
          /*timing-function    規定動畫的速度曲線。*/
         /*delay    規定在動畫開始之前的延遲。*/
        /*iteration-count    規定動畫應該播放的次數。*/
        /*direction    規定是否應該輪流反向播放動畫。*/
    top: 20%;
    /*left: 50%;*/
}

.rotate_parent .tip_back, .rotate_parent .tip_front, .rotate_parent .tip_left, .rotate_parent .tip_right, .rotate_parent .tip_top {
    background: radial-gradient(transparent 30%,rgba(126,17,91,.2) 100%);
}
.rotate_parent li {
    width: 100px;
    height: 100px;
     transition: -webkit-transform 1s ease-in-out; 
     transition: transform 1s ease-in-out; 
}
.rotate_parent .tip_front {
    -webkit-transform: translateZ(50px);
     transform: translateZ(50px); 
}
.rotate_parent .tip_back {
    -webkit-transform:translateZ(-50px);
    transform:translateZ(-50px);
}
.rotate_parent .tip_right {
    -webkit-transform: rotateY(90deg) translateZ(50px);
    transform: rotateY(90deg) translateZ(50px);
}
.rotate_parent .tip_left {
    -webkit-transform: rotateY(90deg) translateZ(-50px);
    transform: rotateY(90deg) translateZ(-50px);
}
.rotate_parent .tip_top {
    -webkit-transform: rotateX(90deg) translateZ(50px);
    transform: rotateX(90deg) translateZ(50px);
}
.rotate_parent .tip_bottom{
    -webkit-transform: rotateX(90deg) translateZ(-50px);
    transform: rotateX(90deg) translateZ(-50px);
}
.rotate_parent .tip_floor {
    box-shadow: -300px 0 50px rgba(0,0,0,.3);
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    width: 110px;
    height: 110px;
    left: 295px;
    background-color: transparent;
    -webkit-transform: rotateX(90deg) translateZ(-60px);
    transform: rotateX(90deg) translateZ(-60px);
}
@-webkit-keyframes willRotate{
    0%{
        transform:rotateX(-33.5deg) rotateY(45deg);
    }
    100%{
        transform:rotateX(-33.5deg) rotateY(360deg);
    }
}
@keyframes willRotate{
    0%{
        transform:rotateX(-33.5deg) rotateY(45deg);
    }
    100%{
        transform:rotateX(-33.5deg) rotateY(360deg);
    }
}

最後更新：2017-11-05 11:35:40

  上一篇：go  最簡單的輪播廣告(原生JS)
  下一篇：go  JS操作未跨域iframe裏的DOM