집 >웹 프론트엔드 >CSS 튜토리얼 >CSS3 3D 특수 효과 비디오 튜토리얼

CSS3 3D 특수 효과 비디오 튜토리얼

炎欲天舞원래의: 2017-08-24 11:27:391901검색

강좌 소개:

Transition

1: CSS3의 전환

2: CSS3의 전환 속성

3: CSS3의 전환 효과 분석

4: CSS3의 전환 효과 5가지

연습 질문

1: 3D 장면 만들기

2: 3D 장면 만들기

3: 실제로 3D 장면 만들기

4: 속성 번역

5: 변형 속성

문제 연습

1: 3D 애니메이션 효과 만들기

2: 만들기 3D 애니메이션 효과 구조 부분

3: JS 부분

4: 연습 문제

5: 프로그래밍 도전

플레이 주소: http://www.php.cn/course/416.html

강사 특징: 명확한 사고, 선명한 음성 설명, 진행형.

난이도 분석: 최신 속성을 많이 사용하기 때문에 브라우저 호환성 문제에 주의하고, 브라우저를 자주 변경하는 것에 주의하고, 호환성을 변경해야 합니다.

코스웨어 다운로드: http://www.php.cn/xiazai/code/2080

html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link href="css.css" rel="stylesheet" type="text/css">
    <script src="js.js"></script>
  </head>
  <body>
    <div id="wrapper">
      <div id="cube">
        <div class="face" id="face1">1</div>
        <div class="face" id="face2">2</div>
        <div class="face" id="face3">3</div>
        <div class="face" id="face4">4</div>
        <div class="face" id="face5">5</div>
        <div class="face" id="face6">6</div>
      </div>
    </div>
    <div id="op">
      <p>rotate x: <span id="deg-x">0</span> deg</p>
      <input type="range" min="-360" max="360" id="rotatex" value="0" class="range-control"
      oninput="rotate()"/><br/>
      <p>rotate y: <span id="deg-y">0</span> deg</p>
      <input type="range" min="-360" max="360" id="rotatey" value="0" class="range-control"
      oninput="rotate()"/><br/>
      <p>rotate z: <span id="deg-z">0</span> deg</p>
      <input type="range" min="-360" max="360" id="rotatez" value="0" class="range-control"
      oninput="rotate()"/><br/>
    </div>
  </body>
</html>

css

#wrapper {
  -webkit-perspective: 800;
  -webkit-perspective-origin: 50% 50%;
}
#cube {
  width: 200px;
  height: 200px;
  margin: 100px auto;
  -webkit-transform-style: preserve-3d;
}
.face {
  width: 200px;
  height: 200px;
  position: absolute;
  margin: 0 auto;
  background-color: rgba(0,0,0,0.5);
  font-size: 200px;
  text-align: center;
  line-height: 200px;
  font-weight: 900;
  color: #fff;
}
#face1 {
}
#face2 {
  -webkit-transform-origin: right;
  -webkit-transform: rotateY(-90deg);
}
#face3 {
  -webkit-transform-origin: left;
  -webkit-transform: rotateY(90deg);
}
#face4 {
  -webkit-transform: translateZ(-200px);
}
#face5 {
  -webkit-transform-origin: top;
  -webkit-transform: rotateX(-90deg);
}
#face6 {
  -webkit-transform-origin: bottom;
  -webkit-transform: rotateX(90deg);
}
#op{
  margin:0 auto;
  font-size:16px;
  font-weight:bold;
  width:800px;
}
#op .range-control{width:721px;}

function rotate() {
   var x = document.getElementById("rotatex").value;
   var y = document.getElementById("rotatey").value;
   var z = document.getElementById("rotatez").value;
    document.getElementById(&#39;cube&#39;).style.webkitTransform = "rotateX(" + x + "deg) rotateY(" + y + "deg) rotateZ(" + z + "deg)";
   document.getElementById(&#39;deg-x&#39;).innerText = x;
   document.getElementById(&#39;deg-y&#39;).innerText = y;
   document.getElementById(&#39;deg-z&#39;).innerText = z;
 }

위 내용은 CSS3 3D 특수 효과 비디오 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：HTML5 Canvas에서 원형 모양을 구현하고 백분율을 표시하는 진행률 표시줄의 자세한 예다음 기사：HTML5 Canvas에서 원형 모양을 구현하고 백분율을 표시하는 진행률 표시줄의 자세한 예