rotate(angle) 定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
<div class="wrapper">
<div><span>我不想旋转(^_^)</span></div>
</div>
.wrapper {
margin: 100px auto;
width: 300px;
height: 200px;
border: 2px dotted blue;
}
.wrapper div{
width: 300px;
height: 200px;
line-height: 200px;
text-align: center;
background: green;
color: #fff;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform:rotate(-20deg);
}
.wrapper span {
display:block;
-webkit-transform:rotate(20deg);
-moz-transform: rotate(20deg);
transform:rotate(20deg);
}
- 大小: 5.1 KB
分享到:
相关推荐
transform:rotate(deg) 默认是绕垂直屏幕的Z轴进行旋转 transform:rotateZ(deg) 绕z轴进行旋转 transform:rotateX(deg) 绕x轴进行旋转 transform:rotateY(deg) 绕y轴进行旋转 deg表示旋转的度数,正值表示顺时针旋转...
transform: scale();缩放在IE浏览器下会有抖动 transform缩放在IE浏览器下会有抖动 可以在缩放的同时添加一个旋转 如: transform: scale(1.2); 换成: transform: scale(1.2) rotate(0.1deg);...clac是css3
CSS3中的transform:rotate()可以实现旋转功能 transition: all 2.0s;表示所有的属性变换在2秒内完成; transform: rotate(360deg);表示图片旋转360度。 参考文档: ...
transform:rotate(); rotateX() rotateY() rotateZ() rotate3D() rotate3D(x,y,z,a) [ 0不旋转,1旋转 ] - x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值; - y:是一个0到1...
纯css3 transform文字变形3D阴影效果代码 纯css3 transform文字变形3D阴影效果代码
css3 transform 3D 图片旋转木马
下面分享一下这款HTML5 Loading动画的实现过程,主要是HTML代码和CSS3代码,以及初始化的JS代码。 首先是HTML代码,只定义一个Loading容器,非常简单。 ”hold”> 接下来是CSS代码,主要是定义每一个圆圈的动画效果...
-webkit-transform:rotateX(-90deg) translateZ(50px); } .minbox li:nth-child(4){ background: url(img/04.png) no-repeat 0 0; -webkit-transform:rotateX(90deg) translateZ(50px); } .minbox li:nth-...
transform-style属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现。他主要有两个属性值:flat和preserve-3d。 transform-style属性的使用语法非常简单: CSS Code复制内容到剪贴板 transform-style: ...
Css3-3d-transform__实现图片旋转木马3D效果</ title > </ head > < style > # doc { height : 600 px ; position : relative; overflow : hidden; background-color : # ddd ; } # stage { ...
CSS3中的变形功能:在CSS3中可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动着四种类型的变形功能。 1、如何使用transform功能: (1)在CSS3中通过transform属性来实现transform功能: (2)...
-webkit-transform:rotate(-45deg) translateY(25%); -moz-transform:rotate(-45deg) translateY(25%); transform:rotate(-45deg) translateY(25%); font-family:"Raphaelicons"; text-shadow:1px 1px 1px rgba...
带有圆角和边框的css3六角形。 css3六边形,可设置border与border-radius 结果 查看 捕获 大小和边框宽度 您可以按比例更改六边形的大小和边框宽度。 要在此处更改css文件。 -webkit-transform : rotate ( -30 deg ...
HTML5 CSS3技术实现三维旋转的自行车动画,自行车旋转一圈,可以看到轮子的变化很明显,不同视角看到不同的自行车,这个效果打开后,感觉就像...transform: rotate、webkit-linear-gradient等CSS3动画生成要素的用法。
里面有用H5 css3的transform:rotate做出来的彩色扇子,可以了解一下,基础很简单
复制代码代码如下: /*css3 2D图片转动样式*/ .leftyyy //向左转动30度,这个30度是我自认为的。可以拿去测试就知道了-30向左,30向右 { transform:rotate(-30deg); -webkit-transform:rotate(-30deg); /* Safari and...
div css3 transform旋转变形属性制作新浪微博图片抖动
0%{-webkit-transform:scale(0);transform:scale(0);opacity:1} 100%{-webkit-transform:scale(1);transform:scale(1);opacity:0} } @-moz-keyframes warn{ 0%{-moz-transform:scale(0);transform:scale(0);...
css3 transform旋转属性鼠标悬停3D立体图片旋转显示 css3 transform旋转属性鼠标悬停3D立体图片旋转显示