标签: css-transforms

CSS3 3D弯曲透视

CSS3 3D变换+动画很棒.我想知道是否有办法让某些东西弯曲.

这个例子翻转了(纸质)div,但是动画看起来很僵硬,因为实际上,当你翻动纸张时,它会弯曲一点.

那么我忽略的任何属性,或者是一个让它看起来像弯曲的组合？

div {
    width: 90%;
    height: 700px;
    position: fixed;
    left: 5%;
    top: 0;
    background-color: rgba(0,0,0,0.9);

    -webkit-transform: perspective(1000);
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: top;
    -webkit-animation: "page curl down" 1s ease-out forwards;
}

@-webkit-keyframes "page curl down" {
    from {
        -webkit-transform: rotate3D(1,0,0,180deg);
    }

    to {
        -webkit-transform: rotate3D(0,0,1);
    }
}

Run Code Online (Sandbox Code Playgroud)

带弯曲的示例页面卷曲(图像):http://numerosign.com/software/css3machine/#documentation

html css 3d css-transforms css-animations

DAD*_*ADU

2011 06-14

7
推荐指数

1
解决办法

8405
查看次数

建立

我有三个人div在容器内的所有方向上使用CSS3翻译,该容器div本身在外部全屏内div.最外面div的全屏幕perspective设置在它上面.

HTML

<div class='outer'>
  <div class='container ofhidden'>
    <div class='item' id='item1'></div>
    <div class='item' id='item2'></div>
    <div class='item' id='item3'></div>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

CSS

.outer {
  perspective: 1000;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}
.outer .container {
  background-color: grey;
  width: 130%;
  height: 100%;
  padding: 1em;
}
.outer .container.ofhidden {
  overflow: hidden;
}
.outer .container .item {
  border: 1px solid black;
  width: 50px;
  height: 50px;
}
.outer .container .item#item1 {
  background-color: green; …

Run Code Online (Sandbox Code Playgroud)

css overflow css3 css-transforms

Aar*_*ron

lucky-day

7
推荐指数

1
解决办法

3471
查看次数

使用CSS -webkit-transform时Chrome上的模糊文本

我正在使用

-webkit-transform: skew(-15deg, 0deg);

Run Code Online (Sandbox Code Playgroud)

歪曲一个div,然后

-webkit-transform: skew(15deg, 0deg);

Run Code Online (Sandbox Code Playgroud)

要纠偏的含文字的孩子.在谷歌浏览器中,倾斜看起来很丑陋和像素化,所以我使用

-webkit-backface-visibility: hidden;

Run Code Online (Sandbox Code Playgroud)

使它看起来不错.现在容器倾斜得非常好,内部文本是"未弯曲的",但文本本身是模糊和丑陋的!(问题仅存在于使用-webkit的chrome中)

演示

有任何想法如何使文字再次清晰？

HTML

<div class="mainBodyItemBox">
    <div class="mainBodyItemImage">
        <img src="http://upload.wikimedia.org/wikipedia/commons/6/6c/2012_Olympic_Football_-_Men's_tournament_-_Honduras_Vs_Morocco.jpg">
    </div>
    <div class="mainBodyItemDecorator"></div>
    <div class="mainBodyItemText">PEC Zwolle v FC Groningen Tickets
        <br> <span class="mainBodyItemType">Football</span>
 <span class="mainBodyItemTime"><strong>04 Apr 2014</strong> | 21:00</span>
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

CSS

.mainBodyItemBox {
    background-color: #f5f5f5;
    display: inline-block;
    font-family: Arial;
    font-size: 12px;
    height: 80px;
    width: 365px;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #c9c9c9;
    margin-left: 25px;
    margin-top: 10px;
    transform: skew(-10deg, 0deg);
    -webkit-transform: skew(-10deg, 0deg);
    -moz-transform: skew(-10deg, 0deg); …

Run Code Online (Sandbox Code Playgroud)

css webkit google-chrome css3 css-transforms

Dor*_*itz

2014 04-02

7
推荐指数

1
解决办法

1万
查看次数

每次相对于当前位置翻译元素？

我的目标是每次单击按钮时translate沿"X"轴的方框100px.我通过temp在jQuery中使用变量以某种方式使它成为可能.有没有其他任何方法可以通过CSS实现这样,当单击按钮时,框应该translate 100px从当前位置？

var temp = 100;
$(document).ready(function(){
	$('#b1').click(function(){
		$('#box-one').css("transform","translate("+temp+"px, 0px)");
		temp = temp + 100;
	});
});

Run Code Online (Sandbox Code Playgroud)

#box-one
{
	background-color: blue;
	height: 100px;
	width: 100px;
	transition: all 0.3s ease;
}

Run Code Online (Sandbox Code Playgroud)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
  <div id="box-one"></div>
  <button id="b1">Move</button>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

html css jquery css3 css-transforms

作者

2015 04-11

7
推荐指数

1
解决办法

2418
查看次数

在IE10中,translate3d介于0%和负%之间

我有一个元素需要左右动画到其全宽的50%.

我用以下(简化)标记完成了这个:

<div class="wrapper">
  <div class="inner">Inner</div>
</div>

Run Code Online (Sandbox Code Playgroud)

和风格:

.wrapper {
  position: relative;
  width: 300px;
  height: 200px;
}

.inner {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  animation: MOVE_AROUND 5s infinite;
}

Run Code Online (Sandbox Code Playgroud)

使用关键帧动画:

@keyframes MOVE_AROUND {
  0%, 10% { transform: translate3d(0, 0, 0); }
  20%, 40% { transform: translate3d(-50%, 0, 0); }
  60%, 80% { transform: translate3d(50%, 0, 0); }
  90%, 100% { transform: translate3d(0, 0, 0); }
}

Run Code Online (Sandbox Code Playgroud)

注意:为简洁起见,省略了供应商前缀

在IE10中,它不是移动元素宽度的50%,而是在负数中移动较小的(任意？)量,然后在正数中移动相同的量,然后在动画的80%到90%之间移动,它会快照到达整个50%的距离,然后回到0%.

我想这与负百分比有关,尽管我在其他地方找不到任何关于此的信息.

这是一支笔:http://codepen.io/alexcoady/pen/JogPgx

css css-transforms css-animations internet-explorer-10

Ale*_*lex

2015 04-14

7
推荐指数

1
解决办法

1008
查看次数

在其他元素上添加动画时,不会考虑边框半径和溢出

transform在CSS3中使用时,我有一种奇怪的行为.

这是我的代码:

*, *:before, *:after {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.btn_exchange a {
    position: relative;
    text-decoration: none;
    display: block;
    width: 150px;
    float: left;
    color: #ffffff;
    font-size: 14px;
    background: #0ea2d3;
    box-shadow: 0 3px 0 0 rgba(7, 154, 190, 0.75);
    text-align: center;
    font-weight: bold;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% …

Run Code Online (Sandbox Code Playgroud)

html css css3 css-transforms css-animations

omg*_*ned

2015 12-29

7
推荐指数

1
解决办法

146
查看次数

如何将CSS转换矩阵转换回其组件属性

我通过使用getComputedStyle()如下方法获得了元素的CSS变换矩阵.

var style = window.getComputedStyle(elem1, null);
var trans = style.transform;

Run Code Online (Sandbox Code Playgroud)

trans = matrix(1,0,0,1,1320,290)

有没有办法重新计算变换矩阵以获得原始CSS规则,即.要转换,旋转,倾斜属性的值.我假设它可以通过反转用于形成矩阵的方法来计算.PS - 转换属性的值以百分比给出,我想从矩阵中反算出这些百分比值.

CSS转换 - transform: translate(200%, 500%);

html javascript css css3 css-transforms

Dan*_*lip

2017 03-28

7
推荐指数

1
解决办法

3354
查看次数

我在codepen上创建了带有示例图形的demo:https://codepen.io/justynaj/full/veyJLz/ .

在某些浏览器中,我看到了可怕的故障.最大的问题是毛刺出现不确定性.我注意到,当我的计算机CPU/GPU加载时,这个故障发生的概率会增加.出现在基于webkit的浏览器中的故障,例如Windows 10上的Opera浏览器或Android上的Chrome浏览器.有时它们在页面加载后立即可见,有时在页面滚动后可见.
示例屏幕截图:https://image.ibb.co/hQcrmG/chrome_android.png.

是什么原因导致这种奇怪的浏览器行为？

css webkit css3 css-transforms

Jus*_*a J

2019 05-25

7
推荐指数

1
解决办法

240
查看次数

向下滑动时反转滑块

我按照这篇文章中的垂直可刷卡片滑块.

这个问题有两个部分.

我无法理解滑下时如何反转滑块的方向？

这是相关的代码集 - https://codepen.io/bmarcelino/pen/vRYPXV

更新卡的相关功能

function updateUi() {
    requestAnimationFrame(function(){
        elTrans = 0;
        var elZindex = 5;
        var elScale = 1;
        var elOpac = 1;
        var elTransTop = items;
        var elTransInc = elementsMargin;

        for(i = currentPosition; i < (currentPosition + items); i++){
            if(listElNodesObj[i]){
                listElNodesObj[i].classList.add('stackedcards-bottom', 'stackedcards--animatable', 'stackedcards-origin-bottom');

                listElNodesObj[i].style.transform ='scale(' + elScale + ') translateX(0) translateY(' + (elTrans - elTransInc) + 'px) translateZ(0)';
                listElNodesObj[i].style.webkitTransform ='scale(' + elScale + ') translateX(0) translateY(' + (elTrans - elTransInc) + 'px) translateZ(0)';
                listElNodesObj[i].style.opacity …

Run Code Online (Sandbox Code Playgroud)

javascript css performance css3 css-transforms

arj*_*jun

2018 09-18

7
推荐指数

1
解决办法

266
查看次数

如何计算元素旋转的变换平移(x,y)补偿？

我正在制作一个配置文件图片裁剪编辑器,它允许在一个区域内拖动,缩放和旋转图像.

通过捕获区域的mousedown和mousemove事件并计算光标开始和停止区域内的x/y坐标以获得光标已经行进的距离来完成图像的拖动.然后将该值加到或减去(取决于方向)图像的当前内联样式变换translate(x,y)值.

var dragArea = document.getElementById('drag-area');
var photoImg = document.getElementById('photo');
var cropCircle = document.getElementById('crop-circle');
var cloneContainer = document.getElementById('clone-container');
var resetAll = document.getElementById('reset-all');
var scaleSlider = document.getElementById('scale-slider');
var scaleInput = document.getElementById('scale-input');
var scaleReset = document.getElementById('scale-reset');
var rotateSlider = document.getElementById('rotate-slider');
var rotateInput = document.getElementById('rotate-input');
var rotateReset = document.getElementById('rotate-reset');
var area = {}, photo = {
  translate: {
    x: 0, y: 0
  }, 
  transformOrigin: {
    x: 0, y: 0
  }
};

photoImg.src = photoSrc();
photoImg.style.top = cropCircle.offsetTop+'px';
photoImg.style.left = cropCircle.offsetLeft+'px';
photoImg.style.transform = 'scale(1) …

Run Code Online (Sandbox Code Playgroud)

javascript css css3 css-transforms

Ace*_*Ace

2019 01-21

6
推荐指数

1
解决办法

355
查看次数