在HTML中rotate属性,CSS 图片的旋转rotate旋转属性（一）

poker1.gif

1.属性介绍

属性transform：rotate();为让图片2D旋转的属性

下面为实现上面图片的案例代码

旋转

img{

margin: 100px;

transition: all 0.6s; /*过渡时间为0.6秒*/

/*transform-origin: center center; /*默认值*/

/*transform-origin: top left;*/

/*transform-origin: 20px 30px;*/

}

img:hover{

transform: rotate(360deg); /*deg为旋转度数*/

}

2. 旋转相册

案例代码：

div{

width: 220px;

height: 310px;

position: relative;

border: 1px solid pink;

margin: 300px 300px;

float: left;

}

.div2{

margin: 300px 300px;

float: left;

}

.div2 img{

transform-origin: center center; /*右边扑克中心旋转*/

}

div img{

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

transition: all 0.6s;

transform-origin: top right; /*左边扑克绕右上角旋转*/

}

/*下面为每张图片设置需要旋转的度数*/

div:hover img:nth-child(1){

transform: rotate(60deg);

}

div:hover img:nth-child(2){

transform: rotate(120deg);

}

div:hover img:nth-child(3){

transform: rotate(180deg);

}

div:hover img:nth-child(4){

transform: rotate(240deg);

}

div:hover img:nth-child(5){

transform: rotate(300deg);

}

div:hover img:nth-child(6){

transform: rotate(360deg);

}

效果图：

Rpoker2.gif

如有错误或建议欢迎大家指出与评论哈，希望这篇博文能帮助到大家，也可以分享给需要的人。

在HTML中rotate属性,CSS 图片的旋转rotate旋转属性（一）相关推荐

css图片跟文字居中,css 图片文字垂直居中
先来看张图片相信很多css新手遇到过这种问题,就是当图片和文本显示在一行的时候,效果很奇葩,文字和图片没法对齐, 这时我们需要做的是: 1,先给块级元素设置 display: inline-bloc ...
html中正方形列表标签属性,CSS 列表样式
我们知道在 HTML 中列表可以分为无序列表.有序列表.定义列表.在网页中经常可以看到无序列表的使用,例如像导航栏菜单.新闻列表.商品分类.图片展示等,基本都是通过无序列表来实现的. 无序列表中每个列 ...
CSS中如何实现背景图片透明并且固定和文字不透明效果
设置背景图片的透明度,并且该背景图片不随鼠标滚动而移动,我们可以使用滤镜filter中的透明度设置opacity,并使用伪类before和定位至于opacity的作用:转化图像的透明程度.值定义转换 ...
html图片背景属性,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
html中页面背景属性,css背景属性有哪些？
css背景属性有哪些?下面本篇文章给大家带来关于css背景属性的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css背景属性有哪些?background简写属性,作用是将背景 ...
html如何实现立体效果,在页面中怎么用css让图片有立体感的效果?（代码实测）...
网页页面上如果出现立体感的图片,总会让人有种高科技的感觉.其实立体感的设计并不难,我们可以通过css实现立体感的效果.非常简单易懂,首先我们可以有这样的简单思路,为了突显立体感,要让阴影左右重中间轻, ...
CSS魔幻属性之图片间隙问题
最近看到一篇CSS魔幻属性的文章,感触很深,不过我想,与技巧相比,有些常见css布局难题,有时候更加让我们的日常开发变得踌躇沮丧吧. 为什么此处li标签内的p元素看起来独自撑开了一行这是我在segm ...
html multiply属性,CSS中的合成与混合模式
如果你是一个设计师,你很可能已经遇到或者总有一天会遇到混合效果.混合在图形和印刷设计方面是使用最频繁的效果之一.你可以通过混合文字和纹理背景来给文字添加纹理,通过把图片混合营造出图片融合的错觉,并创造 ...
前端开发css中怎么让图片居中？css图片居中的方法总结
在进行网页布局的时候,有时候图片的位置可能会影响整个页面的美观程度,所以对于图片的放置位置就得变化,那么,接下来的这篇文章将给大家来介绍关于图片在网页中如何使用css实现居中的方法,对于有需要的朋友来 ...

在HTML中rotate属性,CSS 图片的旋转rotate旋转属性（一）

在HTML中rotate属性,CSS 图片的旋转rotate旋转属性（一）相关推荐

最新文章

热门文章