<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">/* 鑽石旋轉 * 要實現這個鑽石旋轉: 首先需要明確這個鑽石分為上下兩個部分,上麵包含六個正三角形,下面有6個倒三角形 * css實現正三角形：上右下左的方向 border-style: solid;border-color:transparent;border-width: 0 50px 170px 50px; border-bottom-color: rgba(255,0,0,0.5) * css實現倒三角形：上右下左的方向 border-style: solid;border-color:transparent;border-width: 170px 50px 0 50px; border-top-color: rgba(255,0,0,0.5) * 然後提供一個3D環境，給外層盒子添加 transform-style: preserve-3d;flat 所有的子項目在2D平面中;preserve-3D 所有的子項目 在3D 平面中 * 上面的三角形設定為絕對位置 absolute * 使用css3的transform 三角形按角度轉動 排列成鑽石的上半部分，同理實現下半部分 * rotateY:沿著Y軸實現旋轉,translateZ:沿著Z軸移動88px;沿著X軸 旋轉31度 * 寫一個動畫tuoluo 0～50%～100% 沿著z軸旋轉 * 實現動畫的迴圈播放animation: tuoluo 3s linear infinite; *//*@keysframes*/.wrap{width: 200px;height: 400px;margin: 30px auto;}@keyframes tuoluo{0%{transform: rotateY(0deg) rotateX(0deg);}50%{transform: rotateY(-180deg) rotateX(18deg);}100%{transform: rotateY(-360deg) rotateX(0deg);}}.wrap .tuoluo{width: 100%;height: 100%;transform-style: preserve-3d; /* flat 所有的子項目在2D平面中*//* preserve-3D 所有的子項目 在3D 平面中*/animation: tuoluo 3s linear infinite;}.wrap .tuoluo .tuoluo-top,.wrap .tuoluo .tuoluo-bottom{position: relative;width: 100%;height: 50%;}.tuoluo-top .face-top{position: absolute;top: 29px;width: 0;height: 0;border-style: solid;border-color: transparent;border-width: 0 50px 170px 50px;border-bottom-color: rgba(65,92,162,.5);/*元素變形基點的位置*/transform-origin: center bottom;}.tuoluo-top .face-top:nth-of-type(1){transform: rotateY(0deg) translateZ(88px) rotateX(31deg);}.tuoluo-top .face-top:nth-of-type(2){transform: rotateY(60deg) translateZ(88px) rotateX(31deg);}.tuoluo-top .face-top:nth-of-type(3){transform: rotateY(120deg) translateZ(88px) rotateX(31deg);}.tuoluo-top .face-top:nth-of-type(4){transform: rotateY(180deg) translateZ(88px) rotateX(31deg);}.tuoluo-top .face-top:nth-of-type(5){transform: rotateY(240deg) translateZ(88px) rotateX(31deg);}.tuoluo-top .face-top:nth-of-type(6){transform: rotateY(300deg) translateZ(88px) rotateX(31deg);}.tuoluo-bottom .face-bottom{position: absolute;width: 0;height: 0;border-style: solid;border-color: transparent;border-width: 170px 50px 0 50px;border-top-color: rgba(65,92,162,.5);/*元素變形基點的位置*/transform-origin: center top;}.tuoluo-bottom .face-bottom:nth-of-type(1){transform: rotateY(0deg) translateZ(88px) rotateX(-31deg);}.tuoluo-bottom .face-bottom:nth-of-type(2){transform: rotateY(60deg) translateZ(88px) rotateX(-31deg);}.tuoluo-bottom .face-bottom:nth-of-type(3){transform: rotateY(120deg) translateZ(88px) rotateX(-31deg);}.tuoluo-bottom .face-bottom:nth-of-type(4){transform: rotateY(180deg) translateZ(88px) rotateX(-31deg);}.tuoluo-bottom .face-bottom:nth-of-type(5){transform: rotateY(240deg) translateZ(88px) rotateX(-31deg);}.tuoluo-bottom .face-bottom:nth-of-type(6){transform: rotateY(300deg) translateZ(88px) rotateX(-31deg);}</style></head><body><p class="wrap"><p class="tuoluo"><p class="tuoluo-top"><p class="face-top"></p><p class="face-top"></p><p class="face-top"></p><p class="face-top"></p><p class="face-top"></p><p class="face-top"></p></p><p class="tuoluo-bottom"><p class="face-bottom"></p><p class="face-bottom"></p><p class="face-bottom"></p><p class="face-bottom"></p><p class="face-bottom"></p><p class="face-bottom"></p></p></p></p></body></html> Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
