animation-name: test;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: 1;
animation-direction: alternate-reverse;
animation-play-state: paused;
animation-fill-mode: both;
animation: test 2s 2 1s alternate;
@keyframes test {
/* from表示动画的开始位置 也可以使用 0% */
from{
margin-left: 0;
background-color: orange;
}
/* to动画的结束位置 也可以使用100%*/
to{
background-color: red;
margin-left: 700px;
}
}
transform: translateY(-100px);
perspective: 800px;
transform: translateZ(800px);
transform: rotateY(180deg);
/* 是否显示元素的背面 */
backface-visibility: hidden;
transform-origin:20px 20px;
transform:scale(2)
background-color: #bfa;
background-image: url("./img/1.png");
background-position: center;
background-position: -50px 300px;
background-origin: border-box;
background-clip: content-box;
background-size: contain;
SS3的transform属性可以缩放、倾斜和旋转任何元素。在没有任何浏览器前缀的前提下,这个属性已经被所有的现代浏览器所支持。如果想支持黑莓浏览器和安卓版的UC浏览器,你就需要添加-webkit-前缀了。
#myelement{ -webkit-transform:rotate(30deg); transform:rotate(30deg); }
完美!然而,当你使用上述代码时,你会发现元素的内容、边框、背景图片都会发生旋转。那么,怎样才能只旋转背景图片呢?怎样才能只让元素本身旋转,而让其背景图片位置固定呢?
目前,W3C还没有专门变形背景图片的属性。我相信在不久的将来肯定会出现这个非常实用的属性。但是对于现在想实现相同效果的开发者们来说毫无帮助。
万幸,这里有个解决方法。其实,就是一个给父级容器元素before伪元素或者after伪元素添加背景图片的hack。这时,我们就可以独立控制带有背景图片伪元素的变形。
只变形背景
为了控制伪元素在其父级容器内定位,其父级容器元素必须设置相对定位(position:relative)。为了防止背景溢出,你也需要给容器元素设置overflow:hidden;
#myelement{ position:relative; overflow:hidden; }
现在,我们来创建一个具有可以变形背景的绝对定位的伪元素。将伪元素的层级设置为-1(z-index:-1),保证其不遮盖内容。
#myelement:before{ content:''; position:absolute; width:200%; height:200%; top:-50%; left:-50%; z-index:-1; background:url(background.png) 0 0 repeate; -webkit-transform:rotate(30deg); transform:rotate(30deg); }
注意,你需要调整伪元素的宽度、高度和定位。比如,当你使用重复图片做背景时,旋转的区域必须比其所在容器面积大,以此保证全部覆盖容器背景。
固定一个变形元素的背景
父级容器上的所有变形样式都会继承到其伪元素。因此,我们需要撤销其伪元素的变形样式。例如,如果容器旋转30deg,其伪元素背景必须旋转-30deg,这样背景才能固定到某个位置。
#myelement{ position:relative; overflow:hidden; -webkit-transform:rotate(30deg); transform:rotate(30deg); } #myelement:before{ content:''; position:absolute; width:200%; height:200%; top:-50%; left:-50%; z-index:-1; background:url(background.png) 0 0 repeat; -webkit-transform:rotate(-30deg); transform:rotate(-30deg); }
当然,你仍然需要调整伪元素背景的尺寸和位置,使其完全覆盖父级容器。
下面是CodePen上的相关实例:
https://codepen.io/SitePoint/pen/Ngpvwx
这种方法支持所有标准浏览器、edge、IE9~IE11。在IE8中不会有任何变形样式,但是背景图仍然显示。
IE6和IE7不支持伪元素,因此背景图不会显示。然而,为了支持那些古老的浏览器,你可以直接给容器设置背景图而不是用先进的选择器或者一定条件的CSS将容器的背景设置为空。
大量创造性的应用都用到了CSS3的变形属性。您有相关分享吗?
本文由大前端学堂编译出品,原文来自sitepoint,作者Craig Buckler,若转载请注明出处,转发感激不尽。
使用 transform 控制元素的变形,包括控制移动、旋转、倾斜、3D转换等。
下面是CSS提供的变形动作。
position: absolute;
left: 50%;
top: 50%;
/* margin-left: -100px;
margin-top: -100px; */
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
变形参考点,设置元素的 X/YZ 操作的基点,用于控制旋转、倾斜等操作
属性值为:top、bottom、left、right、center 或者是 百分数 | 具体数值
默认值: center center
transform-origin: left center 300px;
控制元素的透视深度
推荐设置作为函数设置,规避透视造成元素大小不一致:transform: perspective(600px);
三维空间视角,对元素设置 Z轴 效果时需要呈现三维空间效果
transform-style: preserve-3d;
控制视线的角度,就像我们眼睛看物体时的聚焦点
需要设置 perspective 规则才能看到效果
控制是否可以看到元素的背面
可选属性:
*请认真填写需求信息,我们会在24小时内与您取得联系。