Safari에서 변환 스타일:preserve-3d가 작동하지 않는 div 내부 요소의 CSS 호버 스타일
<p>호버 스타일을 사용하여 내부에 소셜 아이콘이 포함된 시차 스크롤 헤더를 구현했습니다. 호버 스타일은 현재 Safari에서 작동하지 않습니다. 컨테이너에서 <code>transform-style:preserve-3d</code>를 제거하면 호버 스타일이 작동하지만 시차가 깨집니다. Chrome에서는 잘 작동합니다. </p>
<p>
<pre class="brush:html;toolbar:false;"><!doctype html>
<html class="h-full">
<머리>
<script src="https://cdn.tailwindcss.com/3.3.1"></script>
</머리>
<div class="h-스크린">
<div class="flex h-full flex-col Overflow-hidden Overflow-y-auto bg-stone-900">
<div class="scrollbar-thin 스크롤바-thumb-orange-400 스크롤바-트랙-없음 스크롤바-thumb-rounded-full w-full flex-1 오버플로-x-hidden 오버플로-y-hidden 오버플로-y-스크롤 스크롤 -smooth bg-stone-900" style="perspective: 10px">
<div class="relative flex h-full items-center justify-center" style="transform-style: presents-3d">
<div class="container m-1 lg:w-3/4" style="transform:transformZ(-5px) scale(1.5)">
<h2 class="font-bungee-hairline 인라인 bg-stone-900 상자 장식-clone p-4 text-3xl 글꼴-굵게 선도-일반 텍스트-흰색 hover:bg-red-800 sm:text-4xl md :text-6xl md:leading-tight">여행 &<br />풍경<br />사진</h2>
<div class="mt-4 flex w-min bg-stone-900 px-6 py-4">
<a :href="links.unsplash" aria-label="Unsplash" target="_blank"
><svg class="mr-4 h-6 w-6 채우기-흰색 전환 hover:cursor-pointer hover:fill-orange-400" xmlns="http://www.w3.org/2000/svg " viewBox="0 0 448 512">
<경로 d="M448,230.17V480H0V230.17H141.13V355.09H306.87V230.17ZM306.87,32H141.13V156.91H306.87Z" /></svg
></a>
</div>
</div>
<img class="absolute z-[-1] h-full w-full object-cover" src="https://images.unsplash.com/photo-1661173357770-619fcd1388af?ixlib=rb-4.0.3& ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2340&q=80" alt="해질녘 터키의 거울처럼 반사되는 거대한 소금 호수" style="transform:transformZ(-20px) scale(3) " />
</div>
</div>
</div>
</div></pre>
</p>
<p>제목 아래의 unsplash 아이콘에는 마우스 오버 스타일(주황색 및 커서)이 있어야 합니다. </p>
