CSS3实现透视感效果

2024-09-05 12:18:47

字体：大中小

来源：转载

供稿：网友

这是一款HTML5网页特效，使用CSS3代码让一个正方形实现透视3D效果，请不要在IE下测试，HTML5下有更好的表现。

<!doctype html><html lang="en"><head><meta charset="utf-8" />  <meta name="viewport" content="initial-scale=1.0, user-scalable=0" /> <title>CSS3 3D效果</title> <style media="screen"> .container { width: 200px; height: 200px; border: 1px solid #CCC; margin: 0 auto 40px; } .box { width: 100%; height: 100%; } #red .box { background-color: red; -webkit-transform: perspective( 600px ) rotateY( 45deg ); -moz-transform: perspective( 600px ) rotateY( 45deg ); -o-transform: perspective( 600px ) rotateY( 45deg ); transform: perspective( 600px ) rotateY( 45deg ); } #blue { -webkit-perspective: 600px; -moz-perspective: 600px; -o-perspective: 600px; perspective: 600px; } #blue .box { background-color: blue; -webkit-transform: rotateY( 45deg ); -moz-transform: rotateY( 45deg ); -o-transform: rotateY( 45deg ); transform: rotateY( 45deg ); } </style></head><body><div class="highlight"><pre><code class="css">#red .box { background-color: red; transform: perspective( 600px ) rotateY( 45deg );}</code></pre></div><section id="red" class="container"> <div class="box red"></div> </section><div class="highlight"><pre><code class="css">#blue { perspective: 600px;}#blue .box { background-color: blue; transform: rotateY( 45deg );}</code></pre></div> <section id="blue" class="container"> <div class="box"></div> </section></body></html>

上一篇：CSS3/HTML5代码实例-叮当猫图案

下一篇：HTML5实现3D球视觉特效

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注