CSS3의 Perspective 속성을 활용하여 3D 변환거리를 설정하는 방법의 예시를 공유합니다.-CSS 튜토리얼-php.cn

perspective 속성과 관련 Perspective-Origin 속성은 3D 그래픽 공간에서 좌표축의 거리를 제어하는 데 사용됩니다. 아래에서는 CSS3 Perspective 속성을 사용하여 3D 변환 거리를 설정하는 방법의 예를 공유합니다. , 이에 대해서는 나중에 이야기하겠습니다.spective-origin 사용법:

perspective 속성은 3D 변형에 매우 중요합니다. 이 속성은 뷰어의 위치를 설정하고 시각적 콘텐츠를 뷰 절두체에 매핑하여 이를 2D 뷰 평면에 투영합니다. 원근을 지정하지 않으면 Z 공간의 모든 점은 동일한 2D 보기 평면에 타일링되며 변환 결과에 피사계 심도 개념이 없습니다.

위 설명은 실제로 이해하기 어려울 수 있습니다. 관점 속성의 경우 사용자와 요소의 Z 평면 사이의 거리를 설정하는 데 사용되는 보기 거리로 간단히 이해하면 됩니다. 3D 공간. 효과는 값에 따라 결정됩니다. 값이 작을수록 사용자는 3D 공간의 Z 평면에 가까워지고, 반대로 값이 클수록 사용자는 Z에서 멀어집니다. 3D 공간의 평면과 시각적 효과가 더 인상적입니다.

3D 변형에서 아래 예에서 설명한 Z축 변형과 같은 일부 변형의 경우 변형 효과를 보려면 원근 속성이 필수적입니다.

먼저 카드 놀이의 3D 회전 효과를 생성하는 간단한 예를 살펴보겠습니다. 하나는 카드 놀이의 상위 요소에 시야 거리 관점을 추가하고 다른 하나는 이를 설정하지 않습니다.

HTML

<p>
    <img src="images/cardKingClub.png" alt="" width="142"    style="max-width:90%" />
    <img src="images/cardKingClub.png" alt="" width="142"    style="max-width:90%" />
</p>
<p>
    <img src="images/cardKingClub.png" alt="" width="142"    style="max-width:90%" />
    <img src="images/cardKingClub.png" alt="" width="142"    style="max-width:90%" />
</p>

로그인 후 복사

CSS

p {   
    width: 500px;   
    height: 300px;   
    margin: 30px auto;   
    position: relative;   
    background: url(images/bg-grid.jpg) no-repeat center center;   
    background-size: 100% 100%;   
}   
p img {   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    margin-left: -71px;   
    margin-top: -100px;    
    transform-origin: bottombottom;   
}   
p img:nth-child(1){   
    opacity: .5;   
    z-index: 1;   
}   
p img:nth-child(2){   
    z-index: 2;   
    transform: rotateX(45deg);   
}   
p:nth-of-type(2){   
    perspective: 500px;   
}

로그인 후 복사

효과는 다음과 같습니다.
CSS3의 Perspective 속성을 활용하여 3D 변환거리를 설정하는 방법의 예시를 공유합니다.

위 그림의 효과는 모든 것을 완전히 설명합니다. 상위 노드가 원근감을 설정하지 않은 경우 매화왕의 3D 회전 효과가 명확하지 않습니다. 그러나 상위 노드가 원근감을 설정한 후에는 매화왕이 3D 회전처럼 보입니다.

위의 예는 단순히 Perspective를 사용하는 방법을 보여줍니다. 다시 돌아가서 Perspective 사용의 구문을 살펴보겠습니다.

perspective：none | <length>

로그인 후 복사

perspective 속성에는 none 및 단위가 있는 길이 값. Perspective 속성의 기본값은 없음입니다. 이는 3D 객체가 무한한 각도에서 보이지만 평면적으로 보인다는 것을 의미합니다. 또 다른 값인 는 0보다 큰 길이 단위의 값을 허용합니다. 그리고 그 단위는 백분율 값이 될 수 없습니다. <길이> 값이 클수록 각도가 더 멀리 나타나고 3D 공간에서 강도가 다소 낮아지고 변화가 거의 없습니다. 반대로 이 값이 작을수록 각도가 더 가까워져 각도가 강해지고 3D 변형이 커집니다.

예를 들어 10피트와 1000피트 높이에 서서 10피트 큐브를 본다고 가정해 보겠습니다. 10피트에서는 큐브로부터 같은 크기로 떨어져 있습니다. 따라서 원근 변화는 1,000피트에 서 있는 경우보다 훨씬 더 크며 솔리드 크기는 큐브에서 떨어진 거리의 100분의 1입니다. 동일한 생각이 Perspective의 값에도 적용됩니다. 이 측면에 대한 이해를 높이기 위해 예를 살펴보겠습니다.

HTML

<p class="wrapper w2">
    <p class="cube">
        <p class="side  front">1</p>
        <p class="side   back">6</p>
        <p class="side  right">4</p>
        <p class="side   left">3</p>
        <p class="side    top">5</p>
        <p class="side bottom">2</p>
    </p>
</p>
<p class="wrapper w1">
    <p class="cube">
        <p class="side  front">1</p>
        <p class="side   back">6</p>
        <p class="side  right">4</p>
        <p class="side   left">3</p>
        <p class="side    top">5</p>
        <p class="side bottom">2</p>
    </p>
</p>

로그인 후 복사

CSS

.wrapper {   
    width: 50%;   
    float: left;   
}   
.cube {   
    font-size: 4em;   
    width: 2em;   
    margin: 1.5em auto;   
    transform-style: preserve-3d;   
    transform: rotateX(-40deg) rotateY(32deg);   
}   
.side {   
    position: absolute;   
    width: 2em;   
    height: 2em;   
    background: rgba(255, 99, 71, 0.6);   
    border: 1px solid rgba(0, 0, 0, 0.5);   
    color: white;   
    text-align: center;   
    line-height: 2em;   
}   
.front {   
    transform: translateZ(1em);   
}   
.top {   
    transform: rotateX(90deg) translateZ(1em);   
}   
.rightright {   
    transform: rotateY(90deg) translateZ(1em);   
}   
.left {   
    transform: rotateY(-90deg) translateZ(1em);   
}   
.bottombottom {   
    transform: rotateX(-90deg) translateZ(1em);   
}   

.back {   
    transform: rotateY(-180deg) translateZ(1em);   
}   
.w1 {   
    perspective: 100px;   
}   
.w2{   
    perspective: 1000px;   
}

로그인 후 복사

효과는 다음과 같습니다. 그림과 같이
CSS3의 Perspective 속성을 활용하여 3D 변환거리를 설정하는 방법의 예시를 공유합니다.

위의 소개를 바탕으로 관점의 가치에 대해 간단한 결론을 내릴 수 있습니다.

1. 관점의 가치 없음이거나 설정되지 않았습니다. 실제 3D 공간이 없습니다.
2. 원근감 값이 작을수록 3D 효과가 더욱 뚜렷해집니다. 즉, 눈이 진정한 3D에 가까워집니다.
3. 관점의 값은 무한대이거나, 값이 0이므로 none 값과 같은 효과가 있습니다.
Perspective 속성을 더 잘 이해하려면 해당 속성과 TranslateZ의 관계를 결합해야 합니다. 실제로 원근감의 가치는 단순히 사람의 눈에서 모니터까지의 거리로 이해될 수도 있으며, 변환은 3D 개체와 소스 지점 사이의 거리를 의미합니다. 다음은 원근감 간의 관계를 설명하기 위한 W3C의 다이어그램입니다. 그리고 번역Z.
CSS3의 Perspective 속성을 활용하여 3D 변환거리를 설정하는 방법의 예시를 공유합니다.

위 그림은 Perspective 속성과 TranslateZ의 위치 비율을 보여줍니다. 그림 위로 올라가면 Z는 반d인데, Z축(점선 원)에 나타나는 원래의 원(윤곽선)을 사용하기 위해 캔버스 위의 속이 꽉 찬 원은 연한 파란색처럼 두 부분으로 확장됩니다. 원. 하단 이미지에 표시된 것처럼 원의 크기가 축소되어 점선 원이 캔버스 뒤에 나타나고 z 크기가 원래 위치의 1/3이 됩니다.

3D 변형에서는 3D 공간을 활성화할 수 있는 Perspective 속성 외에 3D 변형 함수의 Perspective()도 3D 공간을 활성화할 수 있습니다. 이들 간의 차이점은 원근감이 스테이지 요소(변형된 요소의 공통 상위 요소)에 사용된다는 것입니다.spective()는 현재 변형된 요소에 사용되며 다른 변환 기능과 함께 사용할 수 있습니다. 예를 들어

.stage {   
    perspective: 600px
}

로그인 후 복사

를

.stage .box {   
    transform: perspective(600px);   
}

로그인 후 복사

로 쓸 수 있습니다.

来看一个简单示例：

HTML

<p class="stage">
    <p class="container">
        <img src="images/cardKingClub.png" alt="" width="142"    style="max-width:90%" />
    </p>
</p>
<p class="stage">
    <p class="container">
        <img src="images/cardKingClub.png" alt="" width="142"    style="max-width:90%" />
    </p>
</p>

로그인 후 복사

CSS

.stage {   
    width: 500px;   
    height: 300px;   
    margin: 30px auto;   
    position: relative;   
    background: url(images/bg-grid.jpg) no-repeat center center;   
    background-size: 100% 100%;   
}   
.container {   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    width: 142px;   
    height: 200px;   
    border: 1px dotted orange;   
    margin-left: -71px;   
    margin-top: -100px;    
}   
.container img{   
    transform: rotateY(45deg);   
}   
.stage:nth-child(1) .container{   
    perspective: 600px;   
}   
.stage:nth-child(2) img {   
    transform:perspective(600px) rotateY(45deg);   
}

로그인 후 복사

效果如下所示：
CSS3의 Perspective 속성을 활용하여 3D 변환거리를 설정하는 방법의 예시를 공유합니다.

上图效果可以看出，虽然书写的形式，属性名称不一致，但是效果却一样。

虽然perspective属性和perspective()函数所起的功能是一样的，但其取值以及以运用的对像有所不同：

1. perspective属性可以取值为none或长度值；而perspective()函数取值只能大于0，如果取值为0或比0小的值，将无法激活3D空间；
2.perspective属性用于变形对像父元素；而perspective()函数用于变形对像自身，并和transform其他函数一起使用。

perspective-origin属性

perspective-origin属性是3D变形中另一个重要属性，主要用来决定perspective属性的源点角度。它实际上设置了X轴和Y轴位置，在该位置观看者好像在观看该元素的子元素。

perspective-origin属性的使用语法也很简单：

代码如下:

perspective-origin：[<percentage> | <length> | left | center | right | top | bottom] | [[<percentage> | <length> | left | center | right] && [<percentage> | <length> | top | center | bottom]]

로그인 후 복사

该属性的默认值为“50% 50%”(也就是center)，其也可以设置为一个值，也可以设置为两个长度值：

第一个长度值指定相对于元素的包含框的X轴上的位置。它可以是长度值（以受支持的长度单位表示）、百分比或以下三个关键词之一：left（表示在包含框的X轴方向长度的0%），center（表示中间点）,或right（表示长度的100%）。
第二个长度值指定相对于元素的包含框的Y轴上的位置。它可以是长度值、百分比或以下三个关键词之一：top（表示在包含框的Y轴方向长度的0%），center（表示中间点），或bottom（表示长度的100%）。
注意，为了指转换子元素变形的深度，perspective-origin属性必须定义父元素上。通常perspective-origin属性本身不做任何事情，它必须被定义在设置了perspective属性的元素上。换句话说，perspective-origin属性需要与perspective属性结合起来使用，以便将视点移至元素的中心以外位置，如下图所示：
CSS3의 Perspective 속성을 활용하여 3D 변환거리를 설정하는 방법의 예시를 공유합니다.