CSS3 3D 特效视频教程-css教程-PHP中文网

首页

web前端

css教程

CSS3 3D 特效视频教程

炎欲天舞

Aug 24, 2017 am 11:27 AM

csscss3

课程介绍：

Transition

1：CSS3中transition

2：CSS3中transition属性

3：CSS3中transition效果分析

4：CSS3中transition5种效果

练习题

1：创建3D场景

2：创建3D场景

3：实际创建3D场景

4：translate属性

5：transform属性

练习题

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中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

光标的下一个CSS样式Apr 23, 2025 am 11:04 AM

具有CSS的自定义光标很棒，但是我们可以将JavaScript提升到一个新的水平。使用JavaScript，我们可以在光标状态之间过渡，将动态文本放置在光标中，应用复杂的动画并应用过滤器。

世界碰撞：使用样式查询的钥匙帧碰撞检测Apr 23, 2025 am 10:42 AM

互动CSS动画和元素相互启动的元素在2025年似乎更合理。虽然不需要在CSS中实施乒乓球，但CSS的灵活性和力量的增加，可以怀疑Lee＆Aver Lee＆Aver Lee有一天将是一场

使用CSS背景过滤器进行UI效果Apr 23, 2025 am 10:20 AM

有关利用CSS背景滤波器属性来样式用户界面的提示和技巧。您将学习如何在多个元素之间进行背景过滤器，并将它们与其他CSS图形效果集成在一起以创建精心设计的设计。

微笑吗？Apr 23, 2025 am 09:57 AM

好吧，事实证明，SVG的内置动画功能从未按计划进行弃用。当然，CSS和JavaScript具有承载负载的能力，但是很高兴知道Smil并没有像以前那样死在水中

'漂亮”在情人眼中Apr 23, 2025 am 09:40 AM

是的，让＃039;跳上文字包装：Safari Technology Preview In Pretty Landing！但是请注意，它与在铬浏览器中的工作方式不同。

CSS-tricks编年史XLIIIApr 23, 2025 am 09:35 AM

此CSS-tricks更新了，重点介绍了年鉴，最近的播客出现，新的CSS计数器指南以及增加了几位新作者，这些新作者贡献了有价值的内容。

tailwind的@Apply功能比听起来更好Apr 23, 2025 am 09:23 AM

在大多数情况下，人们展示了@Apply的@Apply功能，其中包括Tailwind的单个property实用程序之一（会改变单个CSS声明）。当以这种方式展示时，@Apply听起来似乎很有希望。如此明显

感觉就像我没有释放：走向理智的旅程Apr 23, 2025 am 09:19 AM

像白痴一样部署的部署归结为您部署的工具与降低复杂性与添加的复杂性之间的奖励之间的不匹配。

See all articles

热AI工具

热工具

mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），