logo标签列表

水平翻转HTML和CSS

htmlcssextjsflip
36

我正在尝试实现一个功能，需要有两棵树，一棵在另一棵旁边，看起来像镜子。请参考下面的图片：

enter image description here

关键是我已经找到了水平翻转的方法，但文本也被倒置了。我无法反转树并保留原始文本。

以下是我已经完成的内容：http://jsfiddle.net/lontivero/R24mA/

基本上，将以下类应用于HTML body：

.flip-horizontal {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph; /*IE*/
    filter: fliph; /*IE*/
}

HTML 代码：

<body class="flip-horizontal"></body>

还有JS代码：

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    height: 200,
    width: 400,
    // more and more code. SO forces me to paste js code ;(
    renderTo: Ext.getBody()
});
为什么不把所有东西都对齐到右边呢？ - Matías Cánepa
3个回答
52

您的代码已经包含了答案的开头——将文本翻转两次。但由于多了一个,符号，会导致第二个规则无法解析。

我已经更新了代码，将标题元素设置为inline-block，因为行内元素无法进行变换。

.flip-horizontal, .x-grid-cell-inner, .x-column-header-text, .x-panel-header-text {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph; /*IE*/
    filter: fliph; /*IE*/
}

.x-column-header-text, .x-panel-header-text {
    display: inline-block;
}
这一切都很好，直到你点击记录以编辑它 :P - Bojangles
啊，我之前没检查过。我想这只是需要追踪所有的文本类并将它们添加到翻转选择器中的情况。 - freejosh
4

I tried this, and it works great!

HTML code:

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            <!-- Front content -->
        </div>

        <div class="back">
            <!-- Back content -->
        </div>
    </div>
</div>

CSS代码如下：
/* Flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateY(180deg);
}

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}

/* Flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* Hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* Front pane, placed above back */
.front {
    z-index: 2;

    /* For Firefox 31 */
    transform: rotateY(0deg);
}

/* Back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}

我在Bootstrap的col-sm-*中使用这个，效果也非常好：

<div class="col-sm-4 flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="content-box flipper">
        <div class="content-box-front">
            <span class="glyphicon glyphicon-envelope content-box-icon"></span>
            <h4>Share your emotions</h4>
        </div>
        <div class="content-box-back">
            <p>Share emotions with friends, family and teammates.</p>
            <button>Read more</button>
        </div>
    </div>
</div>

CSS：

.content-box {
    position: relative;
    text-align: center;
    height: 105px;
    width: 100%;
}

.content-box-icon {
    font-size: 30px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    text-align: center;
    display: block;
    margin: 5px auto 15px auto;
    color: #fff;
    float: none; 
    background:#25acfd                     
}

.content-box-front
{
    z-index: 2;

    /* For Firefox 31 */
    transform: rotateY(0deg);

    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 105px;
}

.content-box-back {
    transform: rotateY(180deg);
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 105px;
}

/* Entire container, keeps perspective */

/* Flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateY(180deg);
}

/* Flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}
1
旋转180度并不等同于翻转（元素旋转后会倒置）。 - fredrivett
@fredrivett 只使用 transform: rotateY(180deg) 旋转 Y 轴将不会使元素上下颠倒。 - avisk
@avisk 真的吗，我不知道这个，你是对的，感谢纠正。 - fredrivett
2
这是一个示例：example。
/* Entire text flipped around */
div {
  -webkit-transform:rotateY(180deg);
  -moz-transform:rotateY(180deg);
  -o-transform:rotateY(180deg);
  -ms-transform:rotateY(180deg);
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接