如何创建弯曲的内容区域?

时间:2016-05-21 12:24:49

标签: javascript html css

我想让网页的内容区域看起来像一个弯曲的电视显示器。像这样:

网页不一定要响应,但我应该能够使用鼠标放大和缩小曲线区域,并且应该能够滑动曲线。寻找合适的框架/脚本来帮助我做到这一点。

2 个答案:

答案 0 :(得分:0)

要创建弯曲内容错觉,请将其拆分为矩形。

示例来源:http://keithclark.co.uk/articles/creating-3d-worlds-with-html-and-css/

enter image description here

演示:http://codepen.io/keithclark/pen/ksayr

如何使用iframe执行css转换的示例:



       #transformation {
        -webkit-perspective: 800;
        perspective: 800;
        margin: 100px 0 100px 50px;
      }
       #transformation iframe {
        -webkit-transition: -webkit-transform 3s ease-in-out;
        -webkit-transform: rotate3d(0, 1, 1, 60deg);
        transition: transform 1s ease-in-out;
        transform: rotate3d(0, 1, 1, 60deg);
      }
       #transformation iframe:hover {
        -webkit-transform: rotate3d(0, 0, 1, 65deg);
        transform: rotate3d(0, 0, 1, 65deg);
      }
       #transformation {
        -webkit-perspective: 800;
        perspective: 800;
        margin: 100px 0 100px 50px;
      }
      #transformation iframe {
        -webkit-transition: -webkit-transform 2s ease-in-out;
        -webkit-transform: rotate3d(0, 1, 1, 50deg);
        transition: transform 1s ease-in-out;
        transform: rotate3d(0, 1, 1, 50deg);
      }
      #transformation iframe:hover {
        -webkit-transform: rotate3d(0, 0, 1, 50deg);
        transform: rotate3d(0, 0, 1, 55deg);
      }
       #transformation {
        -webkit-perspective: 800;
        perspective: 800;
        margin: 100px 0 100px 50px;
      }
       #transformation iframe {
        -webkit-transition: -webkit-transform 3s ease-in-out;
        -webkit-transform: rotate3d(0, 1, 1, 60deg);
        transition: transform 1s ease-in-out;
        transform: rotate3d(0, 1, 1, 60deg);
      }
       #transformation iframe:hover {
        -webkit-transform: rotate3d(0, 0, 1, 65deg);
        transform: rotate3d(0, 0, 1, 65deg);
      }
       #transformation {
        -webkit-perspective: 800;
        perspective: 800;
        margin: 100px 0 100px 50px;
      }
       #transformation iframe {
        -webkit-transition: -webkit-transform 4s ease-in-out;
        -webkit-transform: rotate3d(0, 1, 1, 750deg);
        transition: transform 1s ease-in-out;
        transform: rotate3d(0, 1, 1, 75deg);
      }
       #transformation iframe:hover {
        -webkit-transform: rotate3d(0, 0, 1, 80deg);
        transform: rotate3d(0, 0, 1, 450deg);
      }
       #transformation {
        -webkit-perspective: 800;
        perspective: 800;
        margin: 100px 0 100px 50px;
      }
       #transformation iframe {
        -webkit-transition: -webkit-transform 2s ease-in-out;
        -webkit-transform: rotate3d(0, 1, 1, 50deg);
        transition: transform 1s ease-in-out;
        transform: rotate3d(0, 1, 1, 50deg);
      }
       #transformation iframe:hover {
        -webkit-transform: rotate3d(0, 0, 1, 550deg);
        transform: rotate3d(0, 0, 1, 55deg);
      }
       #transformation {
        -webkit-perspective: 800;
        perspective: 800;
        margin: 100px 0 100px 50px;
      }
       #transformation iframe {
        -webkit-transition: -webkit-transform 3s ease-in-out;
        -webkit-transform: rotate3d(0, 1, 1, 60deg);
        transition: transform 1s ease-in-out;
        transform: rotate3d(0, 1, 1, 60deg);
      }
       #transformation iframe:hover {
        -webkit-transform: rotate3d(0, 0, 1, 650deg);
        transform: rotate3d(0, 0, 1, 65deg);
      }

    <div id="transformation">
      <iframe src = "http://www.c-sharpcorner.com/" height= 300px width= 400px /iframe>
    </div>
&#13;
&#13;
&#13;

最后,您可以使用html5创建网格曲面。您可以在网格元素上渲染iframe并监听您认为有用的事件,例如缩放(多点触控或滚动条)。构建此类表面并管理其事件可以使用名为jQuery的javascript库完成。

我希望你发现这个答案很有用。

答案 1 :(得分:-1)

你可以在css中添加border-radius来做到这一点。

<textarea style="border-radius: 30px;" rows="3"></textarea>

http://www.css3.info/preview/rounded-border/ 通过这篇文章了解更多信息