发表新帖
发表新帖

How to apply multiple transforms in CSS?

前端 未结
关注
7 1438
死守一世寂寞
死守一世寂寞 2020-11-22 06:09

Using CSS, how can I apply more than one transform?

Example: In the following, only the translation is applied, not the rotation.

li:nth
相关标签:
7条回答
  • 我寻月下人不归
    2020-11-22 06:34

    You have to put them on one line like this:

    li:nth-child(2) {
    transform: rotate(15deg) translate(-20px,0px);
}

    When you have multiple transform directives, only the last one will be applied. It's like any other CSS rule.

    Keep in mind multiple transform one line directives are applied from right to left.

    This: transform: scale(1,1.5) rotate(90deg);
    and: transform: rotate(90deg) scale(1,1.5);

    will not produce the same result:

    .orderOne, .orderTwo {
  font-family: sans-serif;
  font-size: 22px;
  color: #000;
  display: inline-block;
}

.orderOne {
  transform: scale(1, 1.5) rotate(90deg);
}

.orderTwo {
  transform: rotate(90deg) scale(1, 1.5);
}
    <div class="orderOne">
  A
</div>

<div class="orderTwo">
  A
</div>

    0 讨论(0)
  • 你的背包
    2020-11-22 06:48

    You can also apply multiple transforms using an extra layer of markup e.g.:

    <h3 class="rotated-heading">
    <span class="scaled-up">Hey!</span>
</h3>
<style type="text/css">
.rotated-heading
{
    transform: rotate(10deg);
}

.scaled-up
{
    transform: scale(1.5);
}
</style>

    This can be really useful when animating elements with transforms using Javascript.

    0 讨论(0)
  • 孤街浪徒
    2020-11-22 06:52

    Just start from there that in CSS, if you repeat 2 values or more, always last one gets applied, unless using !important tag, but at the same time avoid using !important as much as you can, so in your case that's the problem, so the second transform override the first one in this case...

    So how you can do what you want then?...

    Don't worry, transform accepts multiple values at the same time... So this code below will work:

    li:nth-child(2) {
  transform: rotate(15deg) translate(-20px, 0px); //multiple
}

    If you like to play around with transform run the iframe from MDN below: 

    <iframe src="https://interactive-examples.mdn.mozilla.net/pages/css/transform.html" class="interactive  " width="100%" frameborder="0" height="250"></iframe>

    Look at the link below for more info:

    << CSS transform >>

    0 讨论(0)
  • 醉酒成梦
    2020-11-22 06:56

    You can apply more than one transform like this:

    li:nth-of-type(2){
    transform : translate(-20px, 0px) rotate(15deg);
}
    0 讨论(0)
  • 北恋
    2020-11-22 06:56

    Some time in the future, we can write it like this:

    li:nth-child(2) {
    rotate: 15deg;
    translate:-20px 0px;        
}

    This will become especially useful when applying individual classes on an element:

    <div class="teaser important"></div>

.teaser{rotate:10deg;}
.important{scale:1.5 1.5;}

    This syntax is defined in the in-progress CSS Transforms Level 2 specification, but can't find anything about current browser support other then chrome canary. Hope some day i'll come back and update browser support here ;)

    Found the info in this article which you might want to check out regarding workarounds for current browsers.

    0 讨论(0)
  • 鱼传尺愫
    2020-11-22 06:57

    Transform Rotate and Translate in single line css:-How?

    div.className{
    transform : rotate(270deg) translate(-50%, 0);    
    -webkit-transform: rotate(270deg) translate(-50%, -50%);    
    -moz-transform: rotate(270deg) translate(-50%, -50%);    
    -ms-transform: rotate(270deg) translate(-50%, -50%);    
    -o-transform: rotate(270deg) translate(-50%, -50%); 
    float:left;
    position:absolute;
    top:50%;
    left:50%;
    }
    <html>
<head>
</head>
<body>
<div class="className">
  <span style="font-size:50px">A</span>
</div>
</body>
</html>

    0 讨论(0)
 看不清?
提交回复
热议问题