小编Jey*_*Jey的帖子

使相同元素上的两个(或更多)变换一起工作

我怎样才能让这两个一起工作?看起来他们正在阻止/打破彼此/或仅调用破坏transform3d

HTML结构

<div id="container">
    <div class="one" style="transform:translate3d(0,0,0)"></div>
    <div class="two"></div>
    <div class="one" style="transform:translate3d(0,200px,0)"></div>
    <div class="two"></div>
    <div class="one" style="transform:translate3d(100px,100px,0)"></div>
    <div class="two"></div>
</div>
<div class="div one"></div>
Run Code Online (Sandbox Code Playgroud)

CSS样式

#container {
    -webkit-perspective:200px;
    -webkit-transform-style:preserve-3d;
    width:450px
}
.one {
    position:absolute;
    width:100px;
    height:100px;
    background-color:blue;
    -webkit-transition:1s ease all;
    border:1px solid black;
}
.two {
    -webkit-transform:translate3d(0, 100px, 0);
    position:absolute;
    width:100px;
    height:100px;
    background-color:red;
    -webkit-transition:1s ease all;
    border:1px solid black
}
.one:hover {
    -webkit-transform:scale3d(0, 0, 0);
}
.div.one {
    width:100px;
    height:100px;
    background-color:green;
   -webkit-transform:translate3d(0,400px,0);
}
.div.one:hover{
    -webkit-transform:scale3d(0,0,0);
}
Run Code Online (Sandbox Code Playgroud)

小提琴= http://jsfiddle.net/q44ssh7g/1/

css css3 css-transforms

2
推荐指数
1
解决办法
634
查看次数

获取屏幕宽度并计算最大值

我有下面的代码我想要计算并为font-size/ heightproperties 分配值.在这里我想max-height根据可用屏幕的最大值height和计算值设置属性的值(比如说)(假设像为height属性做的计算一样).有没有办法在LESS中这样做?我试过这个max功能,但它似乎不起作用.

另外,为了将px/em等分配给该值,在其中一个线程中提到它可以使用0em +变量值来完成.但有没有更好看的方式来做到这一点?我试着像下面代码中显示的第二种方式,但它不起作用.

这里提到的用例可能听起来很傻,但实际情况有所不同,我只是为了简单起见就这样说了.

.def(@fSize){
  @defHeight: 100px; // Need this to be screen width
  font-size: 0em + @fSize;
  line-height: 0px + (1.5*@fSize); 
  height: 0px + (15*@fSize); // Works fine
  //height: ~"15*@{fSize}px"; // Just prints 15*1px
  max-height: max(@defHeight, @fSize) // doesn't work
}

div#demo{
  .def(1);
}
Run Code Online (Sandbox Code Playgroud)

css css3 less

1
推荐指数
1
解决办法
5599
查看次数

标签 统计

css ×2

css3 ×2

css-transforms ×1

less ×1