CSS3 超酷的紫罗兰多边形几何变换

贝壳形状->紫罗兰花状，循环反复随机飘移。使用CSS3 transform-3d实现。主要使用translate3d和rotate3d方法实现。

css3, transform

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3048
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #000;
}
.wrapper {
    height: 500px;
    width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -250px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: none;
}
.box {
    height: 98%;
    width: 98%;
    background: rgba(255, 0, 255, 0.03);
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -44%;
    overflow: hidden;
    border-radius: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0deg);
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0deg);
    -webkit-animation: rot 50000ms infinite linear;
    animation: rot 50000ms infinite linear;
    -webkit-animation-delay: 1000ms;
    animation-delay: 1000ms;
}
.box .box {
    -webkit-box-shadow: -15px 15px 50px -5px rgba(255, 255, 255, 0.3) inset;
    box-shadow: -15px 15px 50px -5px rgba(255, 255, 255, 0.3) inset;
}
@-webkit-keyframes rot {
    0% {
        -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg);
        transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg);
    }
    50% {
        -webkit-transform: translate3d(50%, -50%, 0) rotate3d(0, 0, 1, 180deg);
        transform: translate3d(50%, -50%, 0) rotate3d(0, 0, 1, 180deg);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 360deg);
        transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 360deg);
    }
}
@keyframes rot {
    0% {
        -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg);
        transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg);
    }
    50% {
        -webkit-transform: translate3d(50%, -50%, 0) rotate3d(0, 0, 1, 180deg);
        transform: translate3d(50%, -50%, 0) rotate3d(0, 0, 1, 180deg);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 360deg);
        transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 360deg);
    }
}

HTML

贝壳形状->紫罗兰花状，循环反复随机飘移。使用CSS3 transform-3d实现。主要使用translate3d和rotate3d方法实现。

css3, transform

编辑器支持Emmet

快捷键

贝壳形状->紫罗兰花状，循环反复随机飘移。使用CSS3 transform-3d实现。 主要使用translate3d和rotate3d方法实现。

css3, transform

CSS3 10个DIV构建的超酷光影变幻艺术

CSS3 旋转的六边形线条

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

贝壳形状->紫罗兰花状，循环反复随机飘移。使用CSS3 transform-3d实现。主要使用translate3d和rotate3d方法实现。