CSS3 3D 특수 효과 비디오 튜토리얼-CSS 튜토리얼-php.cn

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

炎欲天舞

풀어 주다： 2017-08-24 11:27:39

원래의

1845명이 탐색했습니다.

강좌 소개:

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!