<div class="uv-3d-wrapper">
<div class="uv-3d-parent">
<div class="uv-3d-card">
<div class="uv-3d-logo">
<span class="uv-circle uv-circle1"></span>
<span class="uv-circle uv-circle2"></span>
<span class="uv-circle uv-circle3"></span>
<span class="uv-circle uv-circle4"></span>
<span class="uv-circle uv-circle5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.667 31.69" class="uv-svg">
<path d="M12.827,1.628A1.561,1.561,0,0,1,14.31,0h2.964a1.561,1.561,0,0,1,1.483,1.628v11.9a9.252,9.252,0,0,1-2.432,6.852q-2.432,2.409-6.963,2.409T2.4,20.452Q0,18.094,0,13.669V1.628A1.561,1.561,0,0,1,1.483,0h2.98A1.561,1.561,0,0,1,5.947,1.628V13.191a5.635,5.635,0,0,0,.85,3.451,3.153,3.153,0,0,0,2.632,1.094,3.032,3.032,0,0,0,2.582-1.076,5.836,5.836,0,0,0,.816-3.486Z" transform="translate(0 0)"></path>
<path d="M75.207,20.857a1.561,1.561,0,0,1-1.483,1.628h-2.98a1.561,1.561,0,0,1-1.483-1.628V1.628A1.561,1.561,0,0,1,70.743,0h2.98a1.561,1.561,0,0,1,1.483,1.628Z" transform="translate(-45.91 0)"></path>
<path d="M0,80.018A1.561,1.561,0,0,1,1.483,78.39h26.7a1.561,1.561,0,0,1,1.483,1.628v2.006a1.561,1.561,0,0,1-1.483,1.628H1.483A1.561,1.561,0,0,1,0,82.025Z" transform="translate(0 -51.963)"></path>
</svg>
</span>
</div>
<div class="uv-3d-glass"></div>
<div class="uv-3d-content">
<span class="uv-title">RAYASKILLS (3D UI)</span>
<span class="uv-text">Create, share, and use beautiful custom elements made with CSS</span>
</div>
<div class="uv-3d-bottom">
<div class="uv-social-container">
<button class="uv-social-btn">
<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" class="uv-svg">
<path d="M 9.9980469 3 C 6.1390469 3 3 6.1419531 3 10.001953 L 3 20.001953 C 3 23.860953 6.1419531 27 10.001953 27 L 20.001953 27 C 23.860953 27 27 23.858047 27 19.998047 L 27 9.9980469 C 27 6.1390469 23.858047 3 19.998047 3 L 9.9980469 3 z M 22 7 C 22.552 7 23 7.448 23 8 C 23 8.552 22.552 9 22 9 C 21.448 9 21 8.552 21 8 C 21 7.448 21.448 7 22 7 z M 15 9 C 18.309 9 21 11.691 21 15 C 21 18.309 18.309 21 15 21 C 11.691 21 9 18.309 9 15 C 9 11.691 11.691 9 15 9 z M 15 11 A 4 4 0 0 0 11 15 A 4 4 0 0 0 15 19 A 4 4 0 0 0 19 15 A 4 4 0 0 0 15 11 z"></path>
</svg>
</button>
<button class="uv-social-btn">
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="uv-svg">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</button>
<button class="uv-social-btn">
<svg viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg" class="uv-svg">
<path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"></path>
</svg>
</button>
</div>
<div class="uv-view-more">
<button class="uv-view-more-btn">View more</button>
<svg class="uv-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
</div>
</div>
</div>
</div>
</div>/* کانتینر ایزوله ساز برای جلوگیری از تداخل و تنظیم جهت */
.uv-3d-wrapper {
display: flex;
justify-content: center;
align-items: center;
padding: 50px 0;
width: 100%;
direction: ltr !important; /* اجبار به LTR برای حفظ موقعیت سه بعدی */
}
/* ریست کردن استایلهای داخلی برای اطمینان */
.uv-3d-wrapper * {
box-sizing: border-box;
}
.uv-3d-parent {
width: 290px;
height: 300px;
perspective: 1000px;
}
.uv-3d-card {
height: 100%;
border-radius: 50px;
background: linear-gradient(135deg, rgb(0, 255, 214) 0%, rgb(8, 226, 96) 100%);
transition: all 0.5s ease-in-out;
transform-style: preserve-3d;
box-shadow: rgba(5, 71, 17, 0) 40px 50px 25px -40px, rgba(5, 71, 17, 0.2) 0px 25px 25px -5px;
}
.uv-3d-glass {
transform-style: preserve-3d;
position: absolute;
inset: 8px;
border-radius: 55px;
border-top-right-radius: 100%;
background: linear-gradient(0deg, rgba(255, 255, 255, 0.349) 0%, rgba(255, 255, 255, 0.815) 100%);
transform: translate3d(0px, 0px, 25px);
border-left: 1px solid white;
border-bottom: 1px solid white;
transition: all 0.5s ease-in-out;
}
.uv-3d-content {
padding: 100px 60px 0px 30px;
transform: translate3d(0, 0, 26px);
text-align: left;
}
.uv-title {
display: block;
color: #00894d;
font-weight: 900;
font-size: 20px;
line-height: 1.2;
}
.uv-text {
display: block;
color: rgba(0, 137, 78, 0.7647058824);
font-size: 15px;
margin-top: 20px;
line-height: 1.4;
}
.uv-3d-bottom {
padding: 10px 12px;
transform-style: preserve-3d;
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
display: flex;
align-items: center;
justify-content: space-between;
transform: translate3d(0, 0, 26px);
}
.uv-view-more {
display: flex;
align-items: center;
width: 40%;
justify-content: flex-end;
transition: all 0.2s ease-in-out;
}
.uv-view-more:hover {
transform: translate3d(0, 0, 10px);
}
.uv-view-more-btn {
background: none;
border: none;
color: #00c37b;
font-weight: bolder;
font-size: 12px;
padding: 0;
margin: 0;
cursor: pointer;
}
.uv-view-more .uv-svg {
fill: none;
stroke: #00c37b;
stroke-width: 3px;
max-height: 15px;
margin-left: 5px;
}
.uv-social-container {
display: flex;
gap: 10px;
transform-style: preserve-3d;
}
.uv-social-btn {
width: 30px;
height: 30px;
padding: 5px;
background: rgb(255, 255, 255);
border-radius: 50%;
border: none;
display: flex;
align-items: center;
justify-content: center;
box-shadow: rgba(5, 71, 17, 0.5) 0px 7px 5px -5px;
cursor: pointer;
}
.uv-social-btn:first-child {
transition: transform 0.2s ease-in-out 0.4s, box-shadow 0.2s ease-in-out 0.4s, background 0.2s;
}
.uv-social-btn:nth-child(2) {
transition: transform 0.2s ease-in-out 0.6s, box-shadow 0.2s ease-in-out 0.6s, background 0.2s;
}
.uv-social-btn:nth-child(3) {
transition: transform 0.2s ease-in-out 0.8s, box-shadow 0.2s ease-in-out 0.8s, background 0.2s;
}
.uv-social-btn .uv-svg {
width: 15px;
fill: #00894d;
}
.uv-social-btn:hover {
background: black;
}
.uv-social-btn:hover .uv-svg {
fill: white;
}
.uv-social-btn:active {
background: rgb(255, 234, 0);
}
.uv-social-btn:active .uv-svg {
fill: black;
}
/* لوگو و دایرهها */
.uv-3d-logo {
position: absolute;
right: 0;
top: 0;
transform-style: preserve-3d;
}
.uv-circle {
display: block;
position: absolute;
aspect-ratio: 1;
border-radius: 50%;
top: 0;
right: 0;
box-shadow: rgba(100, 100, 111, 0.2) -10px 10px 20px 0px;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
background: rgba(0, 249, 203, 0.2);
transition: all 0.5s ease-in-out;
}
.uv-circle1 {
width: 170px;
transform: translate3d(0, 0, 20px);
top: 8px;
right: 8px;
}
.uv-circle2 {
width: 140px;
transform: translate3d(0, 0, 40px);
top: 10px;
right: 10px;
-webkit-backdrop-filter: blur(1px);
backdrop-filter: blur(1px);
transition-delay: 0.4s;
}
.uv-circle3 {
width: 110px;
transform: translate3d(0, 0, 60px);
top: 17px;
right: 17px;
transition-delay: 0.8s;
}
.uv-circle4 {
width: 80px;
transform: translate3d(0, 0, 80px);
top: 23px;
right: 23px;
transition-delay: 1.2s;
}
.uv-circle5 {
width: 50px;
transform: translate3d(0, 0, 100px);
top: 30px;
right: 30px;
display: flex;
align-items: center;
justify-content: center;
transition-delay: 1.6s;
}
.uv-circle5 .uv-svg {
width: 20px;
fill: white;
}
/* افکتهای هاور */
.uv-3d-parent:hover .uv-3d-card {
transform: rotate3d(1, 1, 0, 30deg);
box-shadow: rgba(5, 71, 17, 0.3) 30px 50px 25px -40px, rgba(5, 71, 17, 0.1) 0px 25px 30px 0px;
}
.uv-3d-parent:hover .uv-3d-card .uv-3d-bottom .uv-social-container .uv-social-btn {
transform: translate3d(0, 0, 50px);
box-shadow: rgba(5, 71, 17, 0.2) -5px 20px 10px 0px;
}
.uv-3d-parent:hover .uv-3d-card .uv-3d-logo .uv-circle2 {
transform: translate3d(0, 0, 60px);
}
.uv-3d-parent:hover .uv-3d-card .uv-3d-logo .uv-circle3 {
transform: translate3d(0, 0, 80px);
}
.uv-3d-parent:hover .uv-3d-card .uv-3d-logo .uv-circle4 {
transform: translate3d(0, 0, 100px);
}
.uv-3d-parent:hover .uv-3d-card .uv-3d-logo .uv-circle5 {
transform: translate3d(0, 0, 120px);
}
