纯css实现三维纸片文字旋转效果
代码语言：html
所属分类：三维
代码描述：纯css实现三维纸片文字旋转效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
HTML,
BODY {
height: 100vh;
}
BODY {
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
overflow: hidden;
}
.scene {
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
width: 100%;
-webkit-perspective: 500px;
perspective: 500px;
-webkit-perspective-origin: center 53%;
perspective-origin: center 53%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
pointer-events: none;
}
.slices {
position: relative;
width: 446px;
height: 370px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation: rotateY 3s linear infinite alternate;
animation: rotateY 3s linear infinite alternate;
}
.slice-wrapper {
position: relative;
width: 30px;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotateY(-90deg) translateX(-15px);
transform: rotateY(-90deg) translateX(-15px);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
left: 4.26px;
top: 369px;
--angle: -106deg;
-webkit-animation: start-point 2s linear infinite;
animation: start-point 2s linear infinite;
}
.slice {
width: 30px;
height: 30px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: center top;
transform-origin: center top;
-webkit-animation: 2s linear infinite;
animation: 2s linear infinite;
}
.slice__content {
position: relative;
display: block;
height: inherit;
margin-bottom: -1px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
background: black;
-webkit-clip-path: polygon(var(--mid-x-left, 0%) var(--mid-y-left, 70%), var(--top-x-left, 80%) var(--top-y-left, 0%), var(--top-x-right, 80%) var(--top-y-right, 0%), var(--mid-x-right, 100%) var(--mid-y-right, 40%), var(--bottom-x-right, 80%) var(--bottom-y-right, 100%), var(--bottom-x-left, 20%) var(--bottom-y-left, 100%));
clip-path: polygon(var(--mid-x-left, 0%) var(--mid-y-left, 70%), var(--top-x-left, 80%) var(--top-y-left, 0%), var(--top-x-right, 80%) var(--top-y-right, 0%), var(--mid-x-right, 100%) var(--mid-y-right, 40%), var(--bottom-x-right, 80%) var(--bottom-y-right, 100%), var(--bottom-x-left, 20%) var(--bottom-y-left, 100%));
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 .6c1.1.3 1.9.8 2.4 1.7l.1.1c.6 1 .7 2.1.4 3.2h.1c.7-.1 1.2 0 1.7.1.9.3 1.6.7 2 1.5 0 .1.1.1.1.2.3.7.4 1.3.1 2.1-.3.7-.7 1.3-1.4 1.8.075.075.15.094.225.14l.075.06c.4.3.7.7 1 1.1l.2.3c.5 1 .6 2 .3 3.1s-1 2-2 2.5-2 .6-3.2.2c-.1 0-.2 0-.3-.1 0 .5 0 .9-.1 1.4-.2.8-.7 1.4-1.3 1.8-.6.4-1.4.5-2.2.3-.5-.1-.9-.4-1.4-.8-.4.8-1 1.4-1.8 1.9l-.73.16c-.352.075-.727.14-1.07.14-.4 0-.8-.1-1.3-.2-.7-.2-1.2-.5-1.6-.8-.4-.4-.6-.7-.8-1-.6-1.1-.7-2.1-.3-3.2l.2-.5c-.4 0-.9 0-1.3-.1-.4 0-.8-.2-1.2-.5-.3-.2-.5-.5-.7-.7-.4-.7-.5-1.4-.3-2.1.2-.5.4-1 .8-1.3-.4-.1-.7-.3-1-.6-.3-.3-.6-.6-.8-.9-.5-.9-.6-1.9-.2-2.9.4-1 1.1-1.8 2.1-2.3.9-.5 1.8-.6 2.7-.5-.2-.8-.2-1.5-.1-2.3.2-1 .7-1.8 1.4-2.2.8-.4 1.4-.4 2.3-.3.9.2 1.6.7 2.1 1.5.4-.7 1-1.3 1.7-1.6 1-.5 2-.6 3.1-.4zm-5.238 13.876L6.766 17.45 6.2 18.3l-.1.3c-.3.8-.2 1.5.2 2.3.2.2.4.5.6.8l.203.133c.245.156.53.311.997.467.9.2 1.7.2 2.4-.2s1.2-1 1.5-1.8v-.1c0-.067.022-.122.059-.17l-.552-5.347a2.528 2.528 0 01-.745-.207zm1.652.162l.55 5.325.113.11c.464.448.864.76 1.2.888L14.4 21c.6.2 1 .1 1.4-.2.4-.3.7-.7.9-1.2.094-.564.1-1.127.017-1.774l-3.585-3.495c-.223.153-.463.25-.718.307zm8.002-2.827l-6.039.66c-.061.48-.243.874-.518 1.184l3.628 3.539.013.006c.257.171.44.27.74.357l.16.043c1 .3 1.7.2 2.4-.1.7-.4 1.2-1 1.5-1.9.2-.8.1-1.6-.3-2.3v-.2c-.2-.4-.4-.6-.7-.8-.295-.196-.59-.296-.884-.49zM9.305 12.817l-5.271.464L4 13.3l-.5.4c-.3.3-.6.6-.7 1.1-.1.4-.1.8.2 1.2.1.2.2.3.4.4.3.2.5.3.7.3.8.2 1.4.1 2-.1h.133l3.703-2.757-.057-.05a2.237 2.237 0 01-.574-.976zM11.8 10.6c-.27 0-.54.046-.81.167-.035.113-.156.13-.245.133-.048.03-.096.063-.145.1-.3.3-.5.7-.5 1.1 0 .4.2.8.5 1.1.6.6 1.6.7 2.3 0 .3-.3.5-.6.5-1.1 0-.4-.1-.8-.5-1.1-.3-.2-.7-.4-1.1-.4zM3.3 7.2c-.7.4-1.2 1-1.6 1.8-.3.7-.3 1.4.1 2 .1.2.3.5.6.7.3.3.7.5 1.2.6l.056.017A.598.598 0 013.8 12.3l5.417-.476c.065-.535.324-.963.721-1.45l-3.527-3.27L5.7 6.9c-.7-.2-1.6-.1-2.4.3zm16-.5l-1 .2h-.018l-4.389 3.736c.192.254.335.53.42.829L20.3 10.8l.087.007.013-.007c.83-.37 1.406-.909 1.647-1.54l.053-.16c.2-.5.1-.9-.1-1.4l-.006-.035c-.01-.029-.034-.065-.094-.065-.3-.5-.7-.8-1.3-.9-.3-.1-.8-.1-1.3 0zm-5.9-4.8c-.8.4-1.3 1-1.5 1.8V4a.39.39 0 01-.099.247L11.8 9.6c.493 0 .936.149 1.33.376l4.632-3.946L18 5.4c.3-.8.2-1.6-.3-2.4l-.1-.1c-.4-.7-1-1.1-1.8-1.3-.9-.2-1.6-.1-2.4.3zm-6.1.4c-.5.3-.8.8-.9 1.5-.1.8 0 1.5.4 2.3l.183.275 3.792 3.42.024-.009V3.7L10.6 3.3c-.4-.6-.9-1-1.6-1.2-.7-.1-1.2-.1-1.7.2z' id='flower'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 .6c1.1.3 1.9.8 2.4 1.7l.1.1c.6 1 .7 2.1.4 3.2h.1c.7-.1 1.2 0 1.7.1.9.3 1.6.7 2 1.5 0 .1.1.1.1.2.3.7.4 1.3.1 2.1-.3.7-.7 1.3-1.4 1.8.075.075.15.094.225.14l.075.06c.4.3.7.7 1 1.1l.2.3c.5 1 .6 2 .3 3.1s-1 2-2 2.5-2 .6-3.2.2c-.1 0-.2 0-.3-.1 0 .5 0 .9-.1 1.4-.2.8-.7 1.4-1.3 1.8-.6.4-1.4.5-2.2.3-.5-.1-.9-.4-1.4-.8-.4.8-1 1.4-1.8 1.9l-.73.16c-.352.075-.727.14-1.07.14-.4 0-.8-.1-1.3-.2-.7-.2-1.2-.5-1.6-.8-.4-.4-.6-.7-.8-1-.6-1.1-.7-2.1-.3-3.2l.2-.5c-.4 0-.9 0-1.3-.1-.4 0-.8-.2-1.2-.5-.3-.2-.5-.5-.7-.7-.4-.7-.5-1.4-.3-2.1.2-.5.4-1 .8-1.3-.4-.1-.7-.3-1-.6-.3-.3-.6-.6-.8-.9-.5-.9-.6-1.9-.2-2.9.4-1 1.1-1.8 2.1-2.3.9-.5 1.8-.6 2.7-.5-.2-.8-.2-1.5-.1-2.3.2-1 .7-1.8 1.4-2.2.8-.4 1.4-.4 2.3-.3.9.2 1.6.7 2.1 1.5.4-.7 1-1.3 1.7-1.6 1-.5 2-.6 3.1-.4zm-5.238 13.876L6.766 17.45 6.2 18.3l-.1.3c-.3.8-.2 1.5.2 2.3.2.2.4.5.6.8l.203.133c.245.156.53.311.997.467.9.2 1.7.2 2.4-.2s1.2-1 1.5-1.8v-.1c0-.067.022-.122.059-.17l-.552-5.347a2.528 2.528 0 01-.745-.207zm1.652.162l.55 5.325.113.11c.464.448.864.76 1.2.888L14.4 21c.6.2 1 .1 1.4-.2.4-.3.7-.7.9-1.2.094-.564.1-1.127.017-1.774l-3.585-3.495c-.223.153-.463.25-.718.307zm8.002-2.827l-6.039.66c-.061.48-.243.874-.518 1.184l3.628 3.539.013.006c.257.171.44.27.74.357l.16.043c1 .3 1.7.2 2.4-.1.7-.4 1.2-1 1.5-1.9.2-.8.1-1.6-.3-2.3v-.2c-.2-.4-.4-.6-.7-.8-.295-.196-.59-.296-.884-.49zM9.305 12.817l-5.271.464L4 13.3l-.5.4c-.3.3-.6.6-.7 1.1-.1.4-.1.8.2 1.2.1.2.2.3.4.4.3.2.5.3.7.3.8.2 1.4.1 2-.1h.133l3.703-2.757-.057-.05a2.237 2.237 0 01-.574-.976zM11.8 10.6c-.27 0-.54.046-.81.167-.035.113-.156.13-.245.133-.048.03-.096.063-.145.1-.3.3-.5.7-.5 1.1 0 .4.2.8.5 1.1.6.6 1.6.7 2.3 0 .3-.3.5-.6.5-1.1 0-.4-.1-.8-.5-1.1-.3-.2-.7-.4-1.1-.4zM3.3 7.2c-.7.4-1.2 1-1.6 1.8-.3.7-.3 1.4.1 2 .1.2.3.5.6.7.3.3.7.5 1.2.6l.056.017A.598.598 0 013.8 12.3l5.417-.476c.065-.535.324-.963.721-1.45l-3.527-3.27L5.7 6.9c-.7-.2-1.6-.1-2.4.3zm16-.5l-1 .2h-.018l-4.389 3.736c.192.254.335.53.42.829L20.3 10.8l.087.007.013-.007c.83-.37 1.406-.909 1.647-1.54l.053-.16c.2-.5.1-.9-.1-1.4l-.006-.035c-.01-.029-.034-.065-.094-.065-.3-.5-.7-.8-1.3-.9-.3-.1-.8-.1-1.3 0zm-5.9-4.8c-.8.4-1.3 1-1.5 1.8V4a.39.39 0 01-.099.247L11.8 9.6c.493 0 .936.149 1.33.376l4.632-3.946L18 5.4c.3-.8.2-1.6-.3-2.4l-.1-.1c-.4-.7-1-1.1-1.8-1.3-.9-.2-1.6-.1-2.4.3zm-6.1.4c-.5.3-.8.8-.9 1.5-.1.8 0 1.5.4 2.3l.183.275 3.792 3.42.024-.009V3.7L10.6 3.3c-.4-.6-.9-1-1.6-1.2-.7-.1-1.2-.1-1.7.2z' id='flower'/%3E%3C/svg%3E");
-webkit-mask-repeat: round;
mask-repeat: round;
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%;
}
.slice--0 {
-webkit-transform: rotateX(-106deg);
transform: rotateX(-106deg);
height: 21.482px;
}
.slice__content--0 {
--top-x-left: 47%;
--top-y-left: 0%;
--top-x-right: 53%;
--top-y-right: 0%;
--mid-x-right: 53%;
--mid-y-right: 50%;
--bottom-x-right: 58%;
--bottom-y-right: 100%;
--bottom-x-left: 42%;
--bottom-y-left: 100%;
--mid-x-left: 47%;
--mid-y-left: 50%;
-webkit-mask-size: 6%;
mask-size: 6%;
}
.slice--1 {
-webkit-transform: rotateX(-18deg);
transform: rotateX(-18deg);
height: 23.369px;
}
.slice__content--1 {
--top-x-left: 42%;
--top-y-left: 0%;
--top-x-right: 58%;
--top-y-right: 0%;
--mid-x-right: 58%;
--mid-y-right: 50%;
--bottom-x-right: 63%;
--bottom-y-right: 100%;
--bottom-x-left: 37%;
--bottom-y-left: 100%;
--mid-x-left: 42%;
--mid-y-left: 50%;
-webkit-mask-size: 16%;
mask-size: 16%;
}
.slice--2 {
-webkit-transform: rotateX(-11deg);
transform: rotateX(-11deg);
height: 24.92px;
}
.slice__content--2 {
--top-x-left: 37%;
--top-y-left: 0%;
--top-x-right: 63%;
--top-y-right: 0%;
--mid-x-right: 63%;
--mid-y-right: 50%;
--bottom-x-right: 69%;
--bottom-y-right: 100%;
--bottom-x-left: 31%;
--bottom-y-left: 100%;
--mid-x-left: 37%;
--mid-y-left: 50%;
-webkit-mask-size: 26%;
mask-size: 26%;
}
.slice--3 {
-webkit-transform: rotateX(-11deg);
transform: rotateX(-11deg);
height: 28.548px;
}
.slice__content--3 {
--top-x-left: 31%;
--top-y-left: 0%;
--top-x-right: 69%;
--top-y-right: 0%;
--mid-x-right: 69%;
--mid-y-right: 50%;
--bottom-x-right: 74%;
--bottom-y-right: 100%;
--bottom-x-left: 26%;
--bottom-y-left: 100%;
--mid-x-left: 31%;
--mid-y-left: 50%;
-webkit-mask-size: 38%;
mask-size: 38%;
}
.slice--4 {
-webkit-transform: rotateX(-1deg);
transform: rotateX(-1deg);
height: 30.806px;
}
.slice__content--4 {
--top-x-left: 26%;
--top-y-left: 0%;
--top-x-right: 74%;
--top-y-right: 0%;
--mid-x-right: 74%;
--mid-y-right: 50%;
--bottom-x-right: 79%;
--bottom-y-right: 100%;
--bottom-x-left: 21%;
--bottom-y-left: 100%;
--mid-x-left: 26%;
--mid-y-left: 50%;
-webkit-mask-size: 48%;
mask-size: 48%;
}
.slice--5 {
-webkit-transform: rotateX(-3deg);
transform: rotateX(-3deg);
height: 51.718px;
}
.slice__content--5 {
--top-x-left: 21%;
--top-y-left: 0%;
--top-x-right: 79%;
--top-y-right: 0%;
--mid-x-right: 79%;
--mid-y-right: 50%;
--bottom-x-right: 84%;
--bottom-y-right: 100%;
--bottom-x-left: 16%;
--bottom-y-left: 100%;
--mid-x-left: 21%;
--mid-y-left: 50%;
-webkit-mask-size: 58%;
mask-size: 58%;
}
.slice--6 {
-webkit-transform: rotateX(-1deg);
transform: rotateX(-1deg);
height: 31.458px;
}
.slice__content--6 {
--top-x-left: 16%;
--top-y-left: 0%;
--top-x-right: 84%;
--top-y-right: 0%;
--mid-x-right: 84%;
--mid-y-right: 50%;
--bottom-x-right: 90%;
--bottom-y-right: 100%;
--bottom-x-left: 10%;
--bottom-y-left: 100%;
--mid-x-left: 16%;
--mid-y-left: 50%;
-webkit-mask-size: 68%;
mask-size: 68%;
}
.slice--7 {
-webkit-transform: rotateX(-6deg);
transform: rotateX(-6deg);
height: 38.407px;
}
.slice__content--7 {
--top-x-left: 10%;
--top-y-left: 0%;
--top-x-right: 90%;
--top-y-right: 0%;
--mid-x-right: 90%;
--mid-y-right: 50%;
--bottom-x-right: 95%;
--bottom-y-right: 100%;
--bottom-x-left: 5%;
--bottom-y-left: 100%;
--mid-x-left: 10%;
--mid-y-left: 50%;
-webkit-mask-size: 80%;
mask-size: 80%;
}
.slice--8 {
-webkit-transform: rotateX(-4deg);
transform: rotateX(-4deg);
height: 31.469px;
}
.slice__content--8 {
--top-x-left: 5%;
--top-y-left: 0%;
--top-x-right: 95%;
--top-y-right: 0%;
--mid-x-right: 95%;
--mid-y-right: 50%;
--bottom-x-right: 100%;
--bottom-y-right: 100%;
--bottom-x-left: 0%;
--bottom-y-left: 100%;
--mid-x-left: 5%;
--mid-y-left: 50%;
-webkit-mask-size: 90%;
mask-size: 90%;
}
.slice--9 {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
height: 35.912px;
}
.slice__content--9 {
--top-x-left: 0%;
--top-y-left: 0%;
--top-x-right: 100%;
--top-y-right: 0%;
--mid-x-right: 100%;
--mid-y-right: 50%;
--bottom-x-right: 95%;
--bottom-y-right: 100%;
--bottom-x-left: 5%;
--bottom-y-left: 100%;
--mid-x-left: 0%;
--mid-y-left: 50%;
-webkit-mask-size: 100%;
mask-size: 100%;
}
.slice--10 {
-webkit-transform: rotateX(-4deg);
transform: rotateX(-4deg);
height: 21.878px;
}
.slice__content--10 {
--top-x-left: 5%;
--top-y-left: 0%;
--top-x-right: 95%;
--top-y-right: 0%;
--mid-x-right: 95%;
--mid-y-right: 50%;
--bottom-x-right: 90%;
--bottom-y-right: 100%;
--bottom-x-left: 10%;
--bottom-y-left: 100%;
--mid-x-left: 5%;
--mid-y-left: 50%;
-webkit-mask-size: 90%;
mask-size: 90%;
}
.slice--11 {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
height: 28.548px;
}
.slice__content--11 {
--top-x-left: 10%;
--top-y-left: 0%;
--top-x-right: 90%;
--top-y-right: 0%;
--mid-x-right: 90%;
--mid-y-right: 50%;
--bottom-x-right: 84%;
--bottom-y-right: 100%;
--bottom-x-left: 16%;
--bottom-y-left: 100%;
--mid-x-left: 10%;
--mid-y-left: 50%;
-webkit-mask-size: 80%;
mask-size: 80%;
}
.slice--12 {
-webkit-transform: rotateX(-10deg);
transform: rotateX(-10deg);
height: 32.433px;
}
.slice__content--12 {
--top-x-left: 16%;
--top-y-left: 0%;
--top-x-right: 84%;
--top-y-right: 0%;
--mid-x-right: 84%;
--mid-y-right: 50%;
--bottom-x-right: 79%;
--bottom-y-right: 100%;
--bottom-x-left: 21%;
--bottom-y-left: 100%;
--mid-x-left: 16%;
--mid-y-left: 50%;
-webkit-mask-size: 68%;
mask-size: 68%;
}
.slice--13 {
-webkit-transform: rotateX(-25deg);
transform: rotateX(-25deg);
height: 20.812px;
}
.slice__content--13 {
--top-x-left: 21%;
--top-y-left: 0%;
--top-x-right: 79%;
--top-y-right: 0%;
--mid-x-right: 79%;
--mid-y-right: 50%;
--bottom-x-right: 74%;
--bottom-y-right: 100%;
--bottom-x-left: 26%;
--bottom-y-left: 100%;
--mid-x-left: 21%;
--mid-y-left: 50%;
-webkit-mask-size: 58%;
mask-size: 58%;
}
.slice--14 {
-webkit-transform: rotateX(-30deg);
transform: rotateX(-30deg);
height: 16.85px;
}
.slice__content--14 {
--top-x-left: 26%;
--top-y-left: 0%;
--top-x-right: 74%;
--top-y-right: 0%;
--mid-x-right: 74%;
--mid-y-right: 50%;
--bottom-x-right: 69%;
--bottom-y-right: 100%;
--bottom-x-left: 31%;
--bottom-y-left: 100%;
--mid-x-left: 26%;
--mid-y-left: 50%;
-webkit-mask-size: 48%;
mask-size: 48%;
}
.slice--15 {
-webkit-transform: rotateX(-56deg);
transform: rotateX(-56deg);
height: 19.52px;
}
.slice__content--15 {
--top-x-left: 31%;
--top-y-left: 0%;
--top-x-right: 69%;
--top-y-right: 0%;
--mid-x-right: 69%;
--mid-y-right: 50%;
--bottom-x-right: 63%;
--bottom-y-right: 100%;
--bottom-x-left: 37%;
--bottom-y-left: 100%;
--mid-x-left: 31%;
--mid-y-left: 50%;
-webkit-mask-size: 38%;
mask-size: 38%;
}
.slice--16 {
-webkit-transform: rotateX(-35deg);
transform: rotateX(-35deg);
height: 22.109px;
}
.slice__content--16 {
--top-x-left: 37%;
--top-y-left: 0%;
--top-x-right: 63%;
--top-y-right: 0%;
--mid-x-right: 63%;
--mid-y-right: 50%;
--bottom-x-right: 58%;
--bottom-y-right: 100%;
--bottom-x-left: 42%;
--bottom-y-left: 100%;
--mid-x-left: 37%;
--mid-y-left: 50%;
-webkit-mask-size: 26%;
mask-size: 26%;
}
.slice--17 {
-webkit-transform: rotateX(-16deg);
transform: rotateX(-16deg);
height: 34.901px;
}
.slice__content--17 {
--top-x-left: 42%;
--top-y-left: 0%;
--top-x-right: 58%;
--top-y-right: 0%;
--mid-x-right: 58%;
--mid-y-right: 50%;
--bottom-x-right: 53%;
--bottom-y-right: 100%;
--bottom-x-left: 47%;
--bottom-y-left: 100%;
--mid-x-left: 42%;
--mid-y-left: 50%;
-webkit-mask-size: 16%;
mask-size: 16%;
}
.slice--18 {
-webkit-transform: rotateX(-9deg);
transform: rotateX(-9deg);
height: 38.711px;
}
.slice__content--18 {
--top-x-left: 47%;
--top-y-left: 0%;
--top-x-right: 53%;
--top-y-right: 0%;
--mid-x-right: 53%;
--mid-y-right: 50%;
--bottom-x-right: 58%;
--bottom-y-right: 100%;
--bottom-x-left: 42%;
--bottom-y-left: 100%;
--mid-x-left: 47%;
--mid-y-left: 50%;
-webkit-mask-size: 6%;
mask-size: 6%;
}
.slice--19 {
-webkit-transform: rotateX(-2deg);
transform: rotateX(-2deg);
height: 44.161px;
}
.slice__content--19 {
--top-x-left: 42%;
--top-y-left: 0%;
--top-x-right: 58%;
--top-y-right: 0%;
--mid-x-right: 58%;
--mid-y-right: 50%;
--bottom-x-right: 63%;
--bottom-y-right: 100%;
--bottom-x-left: 37%;
--bottom-y-left: 100%;
--mid-x-left: 42%;
--mid-y-left: 50%;
-webkit-mask-size: 16%;
mask-size: 16%;
}
.slice--20 {
-webkit-transform: rotateX(-2deg);
transform: rotateX(-2deg);
height: 48.044px;
}
.slice__content--20 {
--top-x-left: 37%;
--top-y-left: 0%;
--top-x-right: 63%;
--top-y-right: 0%;
--mid-x-right: 63%;
--mid-y-right: 50%;
--bottom-x-right: 69%;
--bottom-y-right: 100%;
--bottom-x-left: 31%;
--bottom-y-left: 100%;
--mid-x-left: 37%;
--mid-y-left: 50%;
-webkit-mask-size: 26%;
mask-size: 26%;
}
.slice--21 {
-webkit-transform: rotateX(-4deg);
transform: rotateX(-4deg);
height: 32.156px;
}
.slice__content--21 {
--top-x-left: 31%;
--top-y-left: 0%;
--top-x-right: 69%;
--top-y-right: 0%;
--mid-x-right: 69%;
--mid-y-right: 50%;
--bottom-x-right: 74%;
--bottom-y-right: 100%;
--bottom-x-left: 26%;
--bottom-y-left: 100%;
--mid-x-left: 31%;
--mid-y-left: 50%;
-webkit-mask-size: 38%;
mask-size: 38%;
}
.slice--22 {
-webkit-transform: rotateX(-6deg);
transform: rotateX(-6deg);
height: 32.728px;
}
.slice__content--22 {
--top-x-left: 26%;
--top-y-left: 0%;
--top-x-right: 74%;
--top-y-right: 0%;
--mid-x-right: 74%;
--mid-y-right: 50%;
--bottom-x-right: 79%;
--bottom-y-right: 100%;
--bottom-x-left: 21%;
--bottom-y-left: 100%;
--mid-x-left: 26%;
--mid-y-left: 50%;
-webkit-mask-size: 48%;
mask-size: 48%;
}
.slice--23 {
-webkit-transform: rotateX(3deg);
transform: rotateX(3deg);
height: 46.84px;
}
.slice__content--23 {
--top-x-left: 21%;
--top-y-left: 0%;
--top-x-right: 79%;
--top-y-right: 0%;
--mid-x-right: 79%;
--mid-y-right: 50%;
--bottom-x-right: 84%;
--bottom-y-right: 100%;
--bottom-x-left: 16%;
--bottom-y-left: 100%;
--mid-x-left: 21%;
--mid-y-left: 50%;
-webkit-mask-size: 58%;
mask-size: 58%;
}
.slice--24 {
-webkit-transform: rotateX(-10deg);
transform: rotateX(-10deg);
height: 36.315px;
}
.slice__content--24 {
--top-x-left: 16%;
--top-y-left: 0%;
--top-x-right: 84%;
--top-y-right: 0%;
--mid-x-right: 84%;
--mid-y-right: 50%;
--bottom-x-right: 90%;
--bottom-y-right: 100%;
--bottom-x-left: 10%;
--bottom-y-left: 100%;
--mid-x-left: 16%;
--mid-y-left: 50%;
-webkit-mask-size: 68%;
mask-size: 68%;
}
.slice--25 {
-webkit-transform: rotateX(-21deg);
transform: rotateX(-21deg);
height: 19.687px;
}
.slice__content--25 {
--top-x-left: 10%;
--top-y-left: 0%;
--top-x-right: 90%;
--top-y-right: 0%;
--mid-x-right: 90%;
--mid-y-right: 50%;
--bottom-x-right: 95%;
--bottom-y-right: 100%;
--bottom-x-left: 5%;
--bottom-y-left: 100%;
--mid-x-left: 10%;
--mid-y-left: 50%;
-webkit-mask-size: 80%;
mask-size: 80%;
}
.slice--26 {
-webkit-transform: rotateX(-49deg);
transform: rotateX(-49deg);
height: 15.005px;
}
.slice__content--26 {
--top-x-left: 5%;
--top-y-left: 0%;
--top-x-right: 95%;
--top-y-right: 0%;
--mid-x-right: 95%;
--mid-y-right: 50%;
--bottom-x-right: 100%;
--bottom-y-right: 100%;
--bottom-x-left: 0%;
--bottom-y-left: 100%;
--mid-x-left: 5%;
--mid-y-left: 50%;
-webkit-mask-size: 90%;
mask-size: 90%;
}
.slice--27 {
-webkit-transform: rotateX(-61deg);
transform: rotateX(-61deg);
height: 17.996px;
}
.slice__content--27 {
--top-x-left: 0%;
--top-y-left: 0%;
--top-x-right: 100%;
--top-y-right: 0%;
--mid-x-right: 100%;
--mid-y-right: 50%;
--bottom-x-right: 95%;
--bottom-y-right: 100%;
--bottom-x-left: 5%;
--bottom-y-left: 100%;
--mid-x-left: 0%;
--mid-y-left: 50%;
-webkit-mask-size: 100%;
mask-size: 100%;
}
.slice--28 {
-webkit-transform: rotateX(-21deg);
transform: rotateX(-21deg);
height: 21.471px;
}
.slice__content--28 {
--top-x-left: 5%;
--top-y-left: 0%;
--top-x-right: 95%;
--top-y-right: 0%;
--mid-x-right: 95%;
--mid-y-right: 50%;
--bottom-x-right: 90%;
--bottom-y-right: 100%;
--bottom-x-left: 10%;
--bottom-y-left: 100%;
--mid-x-left: 5%;
--mid-y-left: 50%;
-webkit-mask-size: 90%;
mask-size: 90%;
}
.slice--29 {
-webkit-transform: rotateX(-9deg);
transform: rotateX(-9deg);
height: 28.198px;
}
.slice__content--29 {
--top-x-left: 10%;
--top-y-left: 0%;
--top-x-right: 90%;
--top-y-right: 0%;
--mid-x-right: 90%;
--mid-y-right: 50%;
--bottom-x-right: 84%;
--bottom-y-right: 100%;
--bottom-x-left: 16%;
--bottom-y-left: 100%;
--mid-x-left: 10%;
--mid-y-left: 50%;
-webkit-mask-size: 80%;
mask-size: 80%;
}
.slice--30 {
-webkit-transform: rotateX(6deg);
transform: rotateX(6deg);
height: 20.485px;
}
.slice__content--30 {
--top-x-left: 16%;
--top-y-left: 0%;
--top-x-right: 84%;
--top-y-right: 0%;
--mid-x-right: 84%;
--mid-y-right: 50%;
--bottom-x-right: 79%;
--bottom-y-right: 100%;
--bottom-x-left: 21%;
--bottom-y-left: 100%;
--mid-x-left: 16%;
--mid-y-left: 50%;
-webkit-mask-size: 68%;
mask-size: 68%;
}
.slice--31 {
-webkit-transform: rotateX(7deg);
transform: rotateX(7deg);
height: 26.701px;
}
.slice__content--31 {
--top-x-left: 21%;
--top-y-left: 0%;
--top-x-right: 79%;
--top-y-right: 0%;
--mid-x-right: 79%;
--mid-y-right: 50%;
--bottom-x-right: 74%;
--bottom-y-right: 100%;
--bottom-x-left: 26%;
--bottom-y-left: 100%;
--mid-x-left: 21%;
--mid-y-left: 50%;
-webkit-mask-size: 58%;
mask-size: 58%;
}
.slice--32 {
-webkit-transform: rotateX(8deg);
transform: rotateX(8deg);
height: 38.754px;
}
.slice__content--32 {
--top-x-left: 26%;
--top-y-left: 0%;
--top-x-right: 74%;
--top-y-right: 0%;
--mid-x-right: 74%;
--mid-y-right: 50%;
--bottom-x-right: 69%;
--bottom-y-right: 100%;
--bottom-x-left: 31%;
--bottom-y-left: 100%;
--mid-x-left: 26%;
--mid-y-left: 50%;
-webkit-mask-size: 48%;
mask-size: 48%;
}
.slice--33 {
-webkit-transform: rotateX(175deg);
transform: rotateX(175deg);
height: 55.173px;
}
.slice__content--33 {
--top-x-left: 31%;
--top-y-left: 0%;
--top-x-right: 69%;
--top-y-right: 0%;
--mid-x-right: 69%;
--mid-y-right: 50%;
--bottom-x-right: 63%;
--bottom-y-right: 100%;
--bottom-x-left: 37%;
--bottom-y-left: 100%;
--mid-x-left: 31%;
--mid-y-left: 50%;
-webkit-mask-size: 38%;
mask-size: 38%;
}
.slice--34 {
-webkit-transform: rotateX(-8deg);
transform: rotateX(-8deg);
height: 15.334px;
}
.slice__content--34 {
--top-x-left: 37%;
--top-y-left: 0%;
--top-x-right: 63%;
--top-y-right: 0%;
--mid-x-right: 63%;
--mid-y-right: 50%;
--bottom-x-right: 58%;
--bottom-y-right: 100%;
--bottom-x-left: 42%;
--bottom-y-left: 100%;
--mid-x-left: 37%;
--mid-y-left: 50%;
-webkit-mask-size: 26%;
mask-size: 26%;
}
.slice--35 {
-webkit-transform: rotateX(-9deg);
transform: rotateX(-9deg);
height: 22.647px;
}
.slice__content--35 {
--top-x-left: 42%;
--top-y-left: 0%;
--top-x-right: 58%;
--top-y-right: 0%;
--mid-x-right: 58%;
--mid-y-right: 50%;
--bottom-x-right: 53%;
--bottom-y-right: 100%;
--bottom-x-left: 47%;
--bottom-y-left: 100%;
--mid-x-left: 42%;
--mid-y-left: 50%;
-webkit-mask-size: 16%;
mask-size: 16%;
}
.slice--36 {
-webkit-transform: rotateX(-8deg);
transform: rotateX(-8deg);
height: 20.342px;
}
.slice__content--36 {
--top-x-left: 47%;
--top-y-left: 0%;
--top-x-right: 53%;
--top-y-right: 0%;
--mid-x-right: 53%;
--mid-y-right: 50%;
--bottom-x-right: 58%;
--bottom-y-right: 100%;
--bottom-x-left: 42%;
--bottom-y-left: 100%;
--mid-x-left: 47%;
--mid-y-left: 50%;
-webkit-mask-size: 6%;
mask-size: 6%;
}
.slice--37 {
-webkit-transform: rotateX(-12deg);
transform: rotateX(-12deg);
height: 17.675px;
}
.slice__content--37 {
--top-x-left: 42%;
--top-y-left: 0%;
--top-x-right: 58%;
--top-y-right: 0%;
--mid-x-right: 58%;
--mid-y-right: 50%;
--bottom-x-right: 63%;
--bottom-y-right: 100%;
--bottom-x-left: 37%;
--bottom-y-left: 100%;
--mid-x-left: 42%;
--mid-y-left: 50%;
-webkit-mask-size: 16%;
mask-size: 16%;
}
.slice--38 {
-webkit-transform: rotateX(-18deg);
transform: rotateX(-18deg);
height: 8.884px;
}
.slice__content--38 {
--top-x-left: 37%;
--top-y-left: 0%;
--top-x-right: 63%;
--top-y-right: 0%;
--mid-x-right: 63%;
--mid-y-right: 50%;
--bottom-x-right: 69%;
--bottom-y-right: 100%;
--bottom-x-left: 31%;
--bottom-y-left: 100%;
--mid-x-left: 37%;
--mid-y-left: 50%;
-webkit-mask-size: 26%;
mask-size: 26%;
}
.slice--39 {
-webkit-transform: rotateX(-37deg);
transform: rotateX(-37deg);
height: 9.219px;
}
.slice__content--39 {
--top-x-left: 31%;
--top-y-left: 0%;
--top-x-right: 69%;
--top-y-right: 0%;
--mid-x-right: 69%;
--mid-y-right: 50%;
--bottom-x-right: 74%;
--bottom-y-right: 100%;
--bottom-x-left: 26%;
--bottom-y-left: 100%;
--mid-x-left: 31%;
--mid-y-left: 50%;
-webkit-mask-size: 38%;
mask-size: 38%;
}
.slice--40 {
-webkit-transform: rotateX(-27deg);
transform: rotateX(-27deg);
height: 16.602px;
}
.slice__content--40 {
--top-x-left: 26%;
--top-y-left: 0%;
--top-x-right: 74%;
--top-y-right: 0%;
--mid-x-right: 74%;
--mid-y-right: 50%;
--bottom-x-right: 79%;
--bottom-y-right: 100%;
--bottom-x-left: 21%;
--bottom-y-left: 100%;
--mid-x-left: 26%;
--mid-y-left: 50%;
-webkit-mask-size: 48%;
mask-size: 48%;
}
.slice--41 {
-webkit-transform: rotateX(-18deg);
transform: rotateX(-18deg);
height: 21.395px;
}
.slice__content--41 {
--top-x-left: 21%;
--top-y-left: 0%;
--top-x-right: 79%;
--top-y-right: 0%;
--mid-x-right: 79%;
--mid-y-right: 50%;
--bottom-x-right: 84%;
--bottom-y-right: 100%;
--bottom-x-left: 16%;
--bottom-y-left: 100%;
--mid-x-left: 21%;
--mid-y-left: 50%;
-webkit-mask-size: 58%;
mask-size: 58%;
}
.slice--42 {
-webkit-transform: rotateX(-16deg);
transform: rotateX(-16deg);
height: 22.483px;
}
.slice__content--42 {
--top-x-left: 16%;
--top-y-left: 0%;
--top-x-right: 84%;
--top-y-right: 0%;
--mid-x-right: 84%;
--mid-y-right: 50%;
--bottom-x-right: 90%;
--bottom-y-right: 100%;
--bottom-x-left: 10%;
--bottom-y-left: 100%;
--mid-x-left: 16%;
--mid-y-left: 50%;
-webkit-mask-size: 68%;
mask-size: 68%;
}
.slice--43 {
-webkit-transform: rotateX(-15deg);
transform: rotateX(-15deg);
height: 24.953px;
}
.slice__content--43 {
--top-x-left: 10%;
--top-y-left: 0%;
--top-x-right: 90%;
--top-y-right: 0%;
--mid-x-right: 90%;
--mid-y-right: 50%;
--bottom-x-right: 95%;
--bottom-y-right: 100%;
--bottom-x-left: 5%;
--bottom-y-left: 100%;
--mid-x-left: 10%;
--mid-y-left: 50%;
-webkit-mask-size: 80%;
mask-size: 80%;
}
.slice--44 {
-webkit-transform: rotateX(-14deg);
transform: rotateX(-14deg);
height: 29.723px;
}
.slice__content--44 {
--top-x-left: 5%;
--top-y-left: 0%;
--top-x-right: 95%;
--top-y-right: 0%;
--mid-x-right: 95%;
--mid-y-right: 50%;
--bottom-x-right: 100%;
--bottom-y-right: 100%;
--bottom-x-left: 0%;
--bottom-y-left: 100%;
--mid-x-left: 5%;
--mid-y-left: 50%;
-webkit-mask-size: 90%;
mask-size: 90%;
}
.slice--45 {
-webkit-transform: rotateX(-21deg);
transform: rotateX(-21deg);
height: 29.699px;
}
.slice__content--45 {
--top-x-left: 0%;
--top-y-left: 0%;
--top-x-right: 100%;
--top-y-right: 0%;
--mid-x-right: 100%;
--mid-y-right: 50%;
--bottom-x-right: 95%;
--bottom-y-right: 100%;
--bottom-x-left: 5%;
--bottom-y-left: 100%;
--mid-x-left: 0%;
--mid-y-left: 50%;
-webkit-mask-size: 100%;
mask-size: 100%;
}
.slice--46 {
-webkit-transform: rotateX(-20deg);
transform: rotateX(-20deg);
height: 14.509px;
}
.slice__content--46 {
--top-x-left: 5%;
--top-y-left: 0%;
--top-x-right: 95%;
--top-y-right: 0%;
--mid-x-right: 95%;
--mid-y-right: 50%;
--bottom-x-right: 90%;
--bottom-y-right: 100%;
--bottom-x-left: 10%;
--bottom-y-left: 100%;
--mid-x-left: 5%;
--mid-y-left: 50%;
-webkit-mask-size: 90%;
mask-size: 90%;
}
.slice--47 {
-webkit-transform: rotateX(-18deg);
transform: rotateX(-18deg);
height: 19.848px;
}
.slice__content--47 {
--top-x-left: 10%;
--top-y-left: 0%;
--top-x-right: 90%;
--top-y-right: 0%;
--mid-x-right: 90%;
--mid-y-right: 50%;
--bottom-x-right: 84%;
--bottom-y-right: 100%;
--bottom-x-left: 16%;
--bottom-y-left: 100%;
--mid-x-left: 10%;
--mid-y-left: 50%;
-webkit-mask-size: 80%;
mask-size: 80%;
}
.slice--48 {
-webkit-transform: rotateX(-36deg);
transform: rotateX(-36deg);
height: 26.611px;
}
.slice__content--48 {
--top-x-left: 16%;
--top-y-left: 0%;
--top-x-right: 84%;
--top-y-right: 0%;
--mid-x-right: 84%;
--mid-y-right: 50%;
--bottom-x-right: 79%;
--bottom-y-right: 100%;
--bottom-x-left: 21%;
--bottom-y-left: 100%;
--mid-x-left: 16%;
--mid-y-left: 50%;
-webkit-mask-size: 68%;
mask-size: 68%;
}
.slice--49 {
-webkit-transform: rotateX(-10deg);
transform: rotateX(-10deg);
height: 11.766px;
}
.slice__content--49 {
--top-x-left: 21%;
--top-y-left: 0%;
--top-x-right: 79%;
--top-y-right: 0%;
--mid-x-right: 79%;
--mid-y-right: 50%;
--bottom-x-right: 74%;
--bottom-y-right: 100%;
--bottom-x-left: 26%;
--bottom-y-left: 100%;
--mid-x-left: 21%;
--mid-y-left: 50%;
-webkit-mask-size: 58%;
mask-size: 58%;
}
.slice--50 {
-webkit-transform: rotateX(-24deg);
transform: rotateX(-24deg);
height: 8.393px;
}
.slice__content--50 {
--top-x-left: 26%;
--top-y-left: 0%;
--top-x-right: 74%;
--top-y-right: 0%;
--mid-x-right: 74%;
--mid-y-right: 50%;
--bottom-x-right: 69%;
--bottom-y-right: 100%;
--bottom-x-left: 31%;
--bottom-y-left: 100%;
--mid-x-left: 26%;
--mid-y-left: 50%;
-webkit-mask-size: 48%;
mask-size: 48%;
}
.slice--.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0