Question

我有几个div，我想将它们旋转成看起来像钻石，但我不希望它们的背景图像旋转，我怎么能实现这个？这是我现在的代码

<div id="diamonds">

<div class="diamond-big diamond-tiesto"><img src="<?php echo $images_url; ?>dj-1-overlay.png" /></div>

</div>

和我的CSS：

#diamonds div {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg); 
float:left;
}

.diamond-tiesto {background-image:url('images/dj-1.jpg'); background-size:cover; width:212px; height:212px; margin-left:160px; margin-right:120px;}
.diamond-tiesto img {margin-top:80px; margin-left:-20px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg); 
}

基本上我试图在没有jquery的情况下实现这个http://mqchen.github.io/jquery.diamonds.js/，任何人都有任何建议

只是一个小提琴：

http://jsfiddle.net/7qj8h/1/

Answer 1

您可以使用this article中描述的技术，并将转换应用于背景图像伪元素。

演示/代码：http://jsfiddle.net/7qj8h/4/

<强> HTML：

<div id="diamonds">
    <div class="diamond-big diamond-tiesto">
        <img src="http://solarismusicfestival.com/new/wp-content/themes/default-blank/images/dj-1-overlay.png" />
    </div>  
</div>

CSS：

.diamond-big
{
    position: relative;
    overflow: hidden;
    width: 200px;
    height: 200px;

    /* rotate diamond */
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.label {
    /* counter rotate label */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);

    /* position label */
    margin-top:80px;
    margin-left:-20px;
}
.diamond-big:before
{
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;

    /* counter rotate bg */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* set bg for different DJs */
.diamond-tiesto:before {
        background: url(http://solarismusicfestival.com/new/wp-content/themes/default-blank/images/dj-1.jpg) 0 0 repeat;
}

Answer 2

将.diamond设置为旋转45度
在.diamond-inner子div上设置背景，然后将其向后旋转-45度以对抗父级的转换。
在overflow: hidden; div上设置.diamond以剪切边缘。
调整内部菱形和图像的位置。

结果：http://jsfiddle.net/7qj8h/3/

CSS：

#diamonds > div {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    float:left;
    overflow: hidden;
}
.diamond-tiesto {
    width:212px;
    height:212px;
}

 .diamond-tiesto .diamond-inner {
    background-image: url("http://solarismusicfestival.com/new/wp-content/themes/default-blank/images/dj-1.jpg");
    background-size: cover;
    height: 305px;
    left: 2px;
    margin: 0 0 0 -49px;
    position: absolute;
    top: -45px;
    transform: rotate(-45deg);
    width: 305px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.diamond-tiesto img {
    margin-left: 22px;
    margin-top: 123px;
}

Div Diamond与直背景图像

2 个答案: