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

Question

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

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

Answer 1

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

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

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

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

＆＃13;

＆＃13;

       #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);
      }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

Answer 2

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

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

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