{"html":"

\n \n \n

\n","css":".advanced-checkbox {\n display: inline-block;\n perspective: 1000px; /* برای ایجاد افکت سه‌بعدی */\n}\n\n.advanced-checkbox input {\n display: none;\n}\n\n.advanced-checkbox label {\n position: relative;\n display: inline-block;\n width: 80px;\n height: 80px;\n cursor: pointer;\n}\n\n.box {\n position: relative;\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n transform: rotateX(0deg) rotateY(0deg);\n transition: transform 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);\n}\n\n.advanced-checkbox input:checked + label .box {\n transform: rotateX(360deg) rotateY(360deg); /* چرخش ۳۶۰ درجه به صورت ترکیبی */\n}\n\n.box > div {\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(145deg, #333, #111);\n border-radius: 12px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);\n}\n\n.front {\n transform: translateZ(40px);\n}\n.back {\n transform: rotateY(180deg) translateZ(40px);\n}\n.left {\n transform: rotateY(-90deg) translateZ(40px);\n}\n.right {\n transform: rotateY(90deg) translateZ(40px);\n}\n.top {\n transform: rotateX(90deg) translateZ(40px);\n}\n.bottom {\n transform: rotateX(-90deg) translateZ(40px);\n}\n\n.checkmark {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border: solid #00ff99;\n border-width: 0 6px 6px 0;\n transform: translate(-50%, -50%) rotate(45deg);\n opacity: 0;\n transition:\n width 0.3s ease,\n height 0.3s ease,\n opacity 0.3s ease;\n}\n\n.advanced-checkbox input:checked + label .checkmark {\n width: 24px;\n height: 48px;\n opacity: 1;\n transition-delay: 1s; /* تاخیر برای نمایش تیک */\n}\n"}

cuddly-penguin-77

👁 实时预览

📝 源代码