分类导航
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsVueDojoJsonElectronNode.jsExpressXMLAjaxUnityReactFlexWeb前端微信小程序支付小程序百度小程序

HTML – 如何将div放在响应式旋转div之上？

CSS   发布时间：2022-04-17  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了HTML – 如何将div放在响应式旋转div之上？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我正试图让这个设计：

但是我遇到了徽标和漩涡的问题,我不知道如何添加它们.
我尝试过绝对定位,但在调整网站大小时,徽标和漩涡最终会出现与图像正方形不同的地方.

如何添加漩涡和徽标？

JSFiddle：http://jsfiddle.net/uHsJv/1/
当你想编辑JS小提琴时,在我网站上的images文件夹中你可以找到以下图像：
– 徽标(images / logo.png或images / logogroot.png)
– 顶部的两个漩涡,包括logo(images / boven.png)
– 底部的两个漩涡(images / onder.png)
– 完整的’背景'(images / achtergrond.png)

目前的HTML：

.box -->

目前的CSS：

body {
    margin: 0;
    padding: 0;
    background-color:#1b1b1b;
}

.outer{
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}
.middle{
    display: table-cell;
    vertical-align: middle;
}
.wrap {
    margin-left: auto;
    margin-right: auto; 
    height:100%;
    overflow: hidden;

    -webkit-box-align:center;
    -webkit-box-pack:center;
    display:-webkit-box;    
}

.box {
    float: left;
    position: relative;
    width: 24.45%;
    padding-bottom: 24.45%;

    margin:auto;

    top: 0; left: 0; bottom: 0; right: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.side {
    width: 17.57%;
    padding-bottom: 17.57%;
}

.left{
    left:3%;
}

.right{
    left:-3%;
}

.boxWrap{
    float: left;
    position: relative;
    width: 11.49%;

    margin:auto;
    padding:0;

    top: 0; left: 0; bottom: 0; right: 0;
}

.leftUp,.leftDown,.rightUp,.rightDown{
    width: 100%;
    padding-bottom:100%;
    position:relative;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.leftUp,.leftDown{
    margin-left:7%;
}

.rightUp,.rightDown{
    margin-left:-7%;
}

.leftDown,.rightDown{
    margin-top:38%;
}

.boxInner {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    overflow: hidden;

    margin:0;
    padding:0;

    background-size:cover;
    background-repeat: no-repeat;
}

.innerLeft{
    background-image:url('../images/home_links.png');
}
.innerMiddle{
    background-image:url('../images/home_midden.png');
}
.innerRight{
    background-image:url('../images/home_rechts.png');
}

.innerLeftUp{
    background-image:url('../images/home_linksB.png');
}
.innerLeftDown{
    background-image:url('../images/home_linksO.png');
}
.innerRightUp{
    background-image:url('../images/home_rechtsB.png');
}
.innerRightDown{
    background-image:url('../images/home_rechtsO.png');
}

.overlay{
    height:100%;
    z-index:2;
    overflow:hidden;
    margin:0;
    padding:0;
}

.blue{
    background: rgba(0,101,147,0.40);
}

.blue:hover{
    background: rgba(185,185,0.40);
}

.hover:hover{
    background: rgba(245,245,0.40);
}

.blue:active,.hover:active{
    background: rgba(178,46,47,0.40);
}
最佳答案
我将装饰图像放在中心.box元素中并通过给它们与它们的父元素相反的旋转来拉直它们,即旋转：-45deg.

这种方法的主要问题是元素围绕其中心旋转,中心的位置取决于元素的宽度.在响应式设计中,这意味着中心的位置取决于页面宽度,即它可以移动.

为了解决这个问题,我在图像周围放置了两个包装元素.外包装(.straight)的宽度为1％.这使得它足够窄,宽度的微小变化不会显着影响其内容的定位.然后将该外包装旋转-45度.

内包装(.straight div)的宽度为10,000％.这使内包装的宽度等于.box元素的宽度(1％x 10000％= 100％).然后可以将装饰图像放置在该图像包装中并且正常地定尺寸,定位等.

我做了两次,一次用于顶部图像,一次用于底部图像.顶部图像的CSS位于此处,底部图像的位置相似：

.straight{
  color:white;
  position:absolute;
  width:1%;
  height:1%;
  -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    text-align:center;
}
.straight.top div{
  width:10000%;
  left:-5000%;
  top:-2000%;
  position:relative;
}

http://jsfiddle.net/John_C/8kFkR/

大佬总结

以上是大佬教程为你收集整理的HTML – 如何将div放在响应式旋转div之上？全部内容，希望文章能够帮你解决HTML – 如何将div放在响应式旋转div之上？所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：csshtml编程问答
猜你在找的CSS相关文章
其他相关热搜词更多
phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap