标签: css-transforms

我知道有可能歪斜,但我没有办法在特定程度上扭曲每个角落.

这是我正在进行的项目:http://map.ucf.edu/

专门查看菜单中的选项卡.现在我正在使用图像,我想为有能力的浏览器改变它.

我知道可以创建一个CSS trapazoid,但这是使用没有内容的边框.最终结果还需要一些圆角.

编辑:从Zoltan Toth的解决方案开始,我能够实现这一目标:演示

div {
    height: 20px;
    padding:2px 5px 0 5px;
    color:white;
    background: rgba(0,0,0,.5);
    margin: 0 10px;
    position: relative;
    border-top-left-radius: 6px 4px;
    border-top-right-radius: 6px 4px;
    font-family:sans-serif;
    font-size:13px;
    line-height:20px;
    vertical-align:bottom;
    display:inline-block;
    white-space:nowrap;
}

div:before {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-bottom: 19px solid rgba(0,0,0,.5);
    border-left: 9px solid transparent;
    position: absolute;
    bottom: 0;
    left: -9px;
}

div:after {
    content: '';
    line-height: 0;
    font-size: 0;
    width: …

在OSX上的Chrome上,在3D中旋转元素并在子元素上执行旋转的反转会中断包含任何链接的子项上的鼠标事件.命中区域似乎未对齐.

dom结构是:

<div class='test'>
    <div><a href='http://www.google.com'>Click me</a></div>
</div>

查看此示例http://jsfiddle.net/rGY5Q/

有没有人知道使用相同的dom结构保留正确的点击区域的解决方法？

我有一个div,我绕着X轴旋转.div包含在应用旋转时变得模糊的文本.有没有办法让文本围绕此轴旋转？我尝试过translate3d和translateZ"hack"但没有成功.

.tilt {
    margin: 0 auto;
    width: 300px;
    height: 400px;
    border: 1px solid #222;

    -webkit-transform: perspective(500px) rotateX(35deg);
       -moz-transform: perspective(500px) rotateX(35deg);
            transform: perspective(500px) rotateX(35deg);
}

<div class="tilt">    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores deleniti expedita nostrum ipsam culpa rem earum recusandae saepe nulla repudiandae molestiae natus consectetur neque quasi quos laudantium doloribus iusto minima!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita id magnam labore doloribus velit quidem exercitationem aspernatur nobis dolore omnis deserunt culpa quibusdam nemo …

我只想扭曲父母并将其歪斜在孩子身上.

示例:HTML

<div class="parent"> <!-- skew(-10deg) -->
    <div class="child">Hello</div> <!-- skew(10deg) (skew back) -->
</div>

示例:CSS

.parent {
    transform: skew(-10deg);
}
.child {
    transform: skew(10deg);
}

使用Firefox,Safari,里面的文字似乎没问题.但Chrome和Opera并不是有点模糊

我必须使用-webkit-backface-visibility: hidden;Chrome中的缩小框像素化

Firefox:

Chrome:

Firefox与Chrome:

或通过Photoshop缩放

实例: http ://jsfiddle.net/1tpj1kka/

任何的想法 ？

注意 !!!:web-tiki的答案是另一种防止问题的解决方案.但如果有人回答了一个真正的解决方案来解决这个偏斜问题(真正的修复),我会接受答案.

通过将"perspective"应用于html元素,我的mix-blend-mode似乎被Firefox忽略了.

html {
    perspective: 800px; /* causing the issue */
}

div {
    color: #fff;    
    background: linear-gradient(to bottom, #000, orange);
    mix-blend-mode: screen;
}

有什么问题？我使用的是Firefox 40.

http://codepen.io/Type-Style/pen/oXJbRE

我想为我的html对象设置几个变换选项,但具有不同的持续时间和延迟.

如果我尝试使用这样的东西:

-webkit-transition: -webkit-transform, opacity;
-webkit-transform: rotate(180deg) scale(2); 
-webkit-transition-duration: 2000ms, 6000ms; 
-webkit-transition-delay: 0ms, 6000ms;

那么我将有不同的时间函数用于变换和不透明度,但我可以设置不同的旋转和缩放选项,例如旋转10秒和缩放20秒？

我正在尝试重新创建这个3D效果,如W3网站上所示.

我已将代码放在jsFiddle中,但正如您所看到的,已应用变换但交叉效果未正确呈现.它在Firefox中也不起作用.

这是Chrome的问题,还是代码问题？

    <style>
.container {
    background-color: rgba(0, 0, 0, 0.3);
    transform-style: preserve-3d;
    perspective: 500px;
}
.container > div {
    position: absolute;
    left: 0;
}
.container > :first-child {
    transform: rotateY(45deg);
    background-color: orange;
    top: 10px;
    height: 135px;
}
.container > :last-child {
    transform: translateZ(40px);
    background-color: rgba(0, 0, 255, 0.75);
    top: 50px;
    height: 100px;
}
</style>

<div class="container">
    <div></div>
    <div></div>
</div>

我这里有一个jsfiddle - http://jsfiddle.net/w23v50h5/1/

        div {
            position: absolute;
            left: 315px;
            top: 143px;
            width: 50px;
            height: 50px;
            background: red;

            -webkit-animation: myOrbit 6s linear infinite; 
               -moz-animation: myOrbit 6s linear infinite; 
                 -o-animation: myOrbit 6s linear infinite; 
                    animation: myOrbit 6s linear infinite; 

        }

        @-webkit-keyframes myOrbit {
            from { -webkit-transform: rotate(0deg) translateX(5px) translateY(120px) rotate(0deg);}
            to   { -webkit-transform: rotate(360deg) translateX(5px) translateY(120px) rotate(-360deg); }
        }

        @-moz-keyframes myOrbit {
            from { -moz-transform: rotate(0deg) translateX(100px) rotate(0deg); }
            to   { -moz-transform: rotate(360deg) translateX(100px) rotate(-360deg); }
        }

        @-o-keyframes myOrbit {
            from { …

我尝试使用过渡创建此效果.看起来你应该打开一个盒子.

有两个问题:

1. 框关闭的顺序与打开的顺序相同.无论如何要按照开口的相反顺序关闭盒子,以便盒子以与关闭时相同的状态返回？
   
2. 由于红色和蓝色的襟翼,绿色和黄色襟翼的末端在过渡期间被隐藏,因此它看起来不是3D.有没有办法以3D方式显示所有襟翼？

我希望如果解决方案是纯CSS,请不要使用JavaScript.

#box {
  position: relative;
  top: 170px;
  left: 170px;
  width: 300px;
  height: 300px;
  border: 1px solid black;
  perspective: 800px;
} 
#flap1, #flap2, #flap3, #flap4 {
  position: absolute;
}
#flap1 {
  background-color: red;
  width: 150px;
  height: 300px;
  z-index: 1;
  transform-origin: 0 0;
  transition: transform 1s;
}
#flap2 {
  left: 150px;
  background-color: blue;
  width: 150px;
  height: 300px;
  z-index: 1;
  transform-origin: 100% 0;
  transition: transform 1s ease 0.3s;
}
#flap3 {
  background-color: green;
  width: 300px;
  height: 150px;
  transform-origin: 0 …

我有一些由 GPS/GNSS 记录的空间数据，包括纬度/经度和椭圆体上方高度（HAE，米）高度值，所有数据均参考 NAD83（2011），EPSG：6318。我正在尝试转换霍兹。到 State Plane NY East（EPSG：6537，这是成功的），但如何将高度/高度数据转换为 NAVD88，US-ft（EPSG：6360）？我可以使用水平应用sf::st_transform(6537)，但我不知道如何应用垂直。我尝试在第一次转换后再串一个sf::st_transform(6360)，但这没有用。下面是一个可重现的示例，作为参考，NOAA VDatum 在线输出显示了正确的值（转换后的高程应约为 5.899 英尺）

library(sf)
library(tidyverse)
pt <- data.frame(Lat = 41.1578110483, Lon = -73.8716163883, Alt = -29.3619984455) %>% 
  st_as_sf(coords = c("Lon", "Lat", "Alt"), crs = 6318, agr = "constant", remove = FALSE) %>% 
  st_transform(6537) %>% 
  mutate(x = st_coordinates(.)[,1],
         y = st_coordinates(.)[,2],
        z = st_coordinates(.)[,3])
pt

Simple feature collection with 1 feature and 6 fields
Attribute-geometry relationship: 3 constant, 0 aggregate, 0 identity, 3 NA's
Geometry type: POINT …