卡包效果实现思路如下：

1.将盒子的尺寸和图片的尺寸宽高度相同。

2.给图片设置绝对定位让他堆叠在盒子里面，相对于父亲，所以父亲设置相对定位，父相子绝。

3.给盒子添加鼠标hover事件，当鼠标移入的时候，让盒子内部的图片进行旋转。我们使用伪类选择器选中每一张图片，因为每一张图片旋转的度数不一样，一共是360度，这里有6张图片，那么每一个图片的旋转度数应该是60，最后一张是360度。

4.这样我们看到它的基准点默认是center center中心点，我们要给所有的图片通过transform-origin属性设置为right top，这样的话就是右上角进行旋转。

5.我们给所有的图片设置transition属性，为了让我们看到过渡效果，而不是直接显示的效果。

6.大功告成，以上就是详细制作思路啦！

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>2D转换综合案例—卡包效果</title><style>body,div,img {margin: 0;padding: 0;}.box {position: relative;width: 225px;height: 150px;border: 1px solid #000;margin: 300px auto;}.box img {position: absolute;left: 0;top: 0;width: 225px;height: 150px;/* 设置公共的基准点，设置到右上角的位置 */transform-origin: right top;/* 设置公共的过渡效果 */transition: all 1.5s ease 0s;}.box:hover img:nth-child(1) {transform: rotate(60deg);}.box:hover img:nth-child(2) {transform: rotate(120deg);}.box:hover img:nth-child(3) {transform: rotate(180deg);}.box:hover img:nth-child(4) {transform: rotate(240deg);}.box:hover img:nth-child(5) {transform: rotate(300deg);}.box:hover img:nth-child(6) {transform: rotate(360deg);}</style>
</head>
<body><div class="box"><img src="data:images/1.jpg" alt=""><img src="data:images/2.jpg" alt=""><img src="data:images/3.jpg" alt=""><img src="data:images/4.jpg" alt=""><img src="data:images/5.jpg" alt=""><img src="data:images/6.jpg" alt=""></div>
</body>
</html>

（27）css3 2D转换综合案例—卡包效果相关推荐

2D转换综合写法（CSS3）
2D转换综合写法(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
CSS3 2D 转换
CSS3 2D 转换先看兼容性 transform属性向应用元素应用2d 或者 3d装换:该属性允许我们进行旋转,缩放,移动或者倾斜: 基本语法: transform: none|transform ...
c语言实现图片过渡效果飞入,用css3实现转换过渡和动画效果
为什么要用css动画替换js动画导致JavaScript效率低的两大原因:操作DOM和使用页面动画. 通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在 ...
CSS3新特性详解(三)：CSS3 2D转换和3D转换 transform 变形使用详解
关于CSS3新特性,在上篇博文中"CSS3新特性详解(二):CSS3 字体@font-face详解.如何创建和修改woff字体文件及text-shadow等文本效果",讨论了C ...
CSS3 2D转换3D转换
1.transform属性方法 Transform 方法 2.2D转换 translate()方法 .div1 {width: 100px;height: 100px;background: #00f ...
(26) CSS3 2D转换transform
一.transform转换属性作用作用:对元素进行移动.缩放.旋转.拉长或拉伸.配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 属性值:多种转换方法的属性值,可以实 ...
2D转换综合写法（13）
HTML5 和 CSS3 提高篇下 2D转换 transform（移动、旋转、缩放、中心点、综合写法）；动画（animation）；3D转换；浏览器私有前缀；背景色线性渐变
------ 2D 转换(transform)移动.旋转.缩放.中心点 ------- 转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.缩放等效果转换(tran ...
CSS3的2D转换和3D转换，你了解了嘛？
css3的2D转换和3D转换 CSS3大纲: 本次讲解css3带来了两种转换:2D转换和3D转换 1. 2D转换转换( transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移(tr ...

（27）css3 2D转换综合案例—卡包效果

卡包效果实现思路如下：

（27）css3 2D转换综合案例—卡包效果相关推荐

最新文章

热门文章