css3 —— 扑克牌旋转/盾牌飞入

扑克牌旋转效果：

<!DOCTYPE html>
<html>
<head><title>扑克牌</title>
</head>
<style type="text/css">*{padding: 0px;margin:0px;}.wrap{width: 310px;height: 438px;/*background-color: red;*/margin:200px auto;position:relative;}img{position:absolute;left: 0px;top: 0px;transition: transform 1s;transform-origin: right bottom; }.wrap:hover img:nth-child(4){transform: rotate(60deg);}.wrap:hover img:nth-child(3){transform:rotate(30deg);}.wrap:hover img:nth-child(1){transform:rotate(-30deg);}
</style>
<body>
<div class="wrap"><img src="data:images/pk1.png" alt=""><img src="data:images/pk1.png" alt=""><img src="data:images/pk1.png" alt=""><img src="data:images/pk1.png" alt="">
</div>
</body>
</html>

总结：

1.margin：0 auto；自适应居中

2.position:absolute; 绝对定位（不影响其他元素，根据left和top来确定位置）

注：默认坐标是页面左上角

3.position:relative; 相对定位

4.img:nth-child() 内部的第几张图片

5.transform:rotate(30deg); 旋转（deg角度）

6.transform-origin: right bottom; 旋转角度（right bottom; 右下角）

盾牌飞入效果：

<!DOCTYPE html>
<html>
<head><title>dun2</title>
</head>
<style type="text/css">*{padding: 0px;margin: 0px;}body{background-color: skyblue;}.o{width: 480px;height: 494px;/*background-color: red;*/margin: 0 auto;}.o img{transition: transform 1s;}.o img:nth-child(1){transform: translate(-300px,200px) rotate(60deg);}.o img:nth-child(2){transform: translate(-500px,400px) rotate(90deg);}.o img:nth-child(3){transform: translate(300px,200px) rotate(60deg);}.o:hover img{transform: none;}
</style>
<body>
<div class="o"><img src="data:images/shield_1_01.png"><img src="data:images/shield_1_02.png"><img src="data:images/shield_1_03.png"><img src="data:images/shield_1_04.png"><img src="data:images/shield_1_05.png"><img src="data:images/shield_1_06.png"><img src="data:images/shield_1_07.png"><img src="data:images/shield_1_08.png"><img src="data:images/shield_1_09.png">
</div>
</body>
</html>

总结：（再上一个的基础上）

transform: translate(x,y) 平移效果

transform: rotat （）旋转效果

css3 —— 扑克牌旋转/盾牌飞入相关推荐

css3之图片展开效果和盾牌飞入
一.图片展开效果 1.先写一个装图片的容器,设置这个容器的样式 <style> .box{width:300px; height:300px //宽度和高度为图片的宽高 }</sty ...
CSS3扑克牌2D旋转
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>扑克牌 ...
用css3制作旋转加载动画的几种方法
2019独角兽企业重金招聘Python工程师标准>>> 以WebKit为核心的浏览器,例如Safari和Chrome,对HTML5有着很好的支持,在移动平台中这两个浏览器对应的就是i ...
css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片思路:1.制作之前呢,我们先来 ...
css3 3d旋转图片立方体特效代码
纯 CSS3 3D 旋转立方体动画特效,该 3D 立方体使用 CSS3 perspective 制作,可以在水平方向.垂直方向和平面视角方向旋转,使用 CSS 来制作立方体动画,效果非常好.下面来看看 ...
html魔方转动效果,html5+css3实现旋转魔方的点点滴滴
一.知识点1:touch事件的相关内容 touchstart touchmove touchend 和其他常用事件一样,touch事件中的event对象中有许多非常有用的方法与属性,而且通过jQuer ...
html+css制作盾牌飞入效果
盾牌飞入一.效果图二.页面背景设置三.图片平移移动四.图片设置平移的方法五.放置图片的容器六视频演示效果: 一.效果图二.页面背景设置 /* 清除网页默认边距 */ *{margin: ...
CSS3 3D旋转图片立方体特效
CSS3 3D旋转图片立方体特效代码. 效果图: 这是一个3D的立方体盒子给盒子添加动画属性使其可以转动. 原理: 原理其实很简单我们看到的一个立方体其实就是靠六个平面搭建起来的如图所示 :六 ...
CSS3——3D旋转图（跑马灯效果图）
2019独角兽企业重金招聘Python工程师标准>>> CSS3--3D旋转图(跑马灯效果图) CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的 ...

css3 —— 扑克牌旋转/盾牌飞入

css3 —— 扑克牌旋转/盾牌飞入相关推荐

最新文章

热门文章