文档章节

css3 perspective transform-stylel

林炳权
 林炳权
发布于 2017/06/24 15:02
字数 126
阅读 4
收藏 0
<!DOCTYPE htm_l>
<html>
<head>
    <meta charset="UTF-8">
    <title>perspective transform-style</title>
    <style>
        /* 重置浏览器默认样式 */
        * { margin: 0; padding: 0; }
        body { font-size: 12px; font-family: "微软雅黑"; }
        a { text-decoration: none; }
        ul li { list-style: none; }
        
        .container { position: relative; perspective: 500px; transform-style: preserve-3d; margin: 20px auto; width: 250px; height: 250px; }
        .container img { position: absolute; transition: all linear .3s; width: 250p; height: 250px; }
        .container .img001 { transform: rotateX(30deg); }
        .container .img002 { transform: rotateX(-30deg); }
        .container:hover .img001 { transform: translateX(-50%) rotateY(12deg); }
        .container:hover .img002 { transform: translateX(50%) rotateY(-12deg); }
    </style>
</head>
<body>
     <!-- 块状元素 -->
    <div class="container">
        <img class="img001" src="../img/001.jpg" alt="">
        <img class="img002" src="../img/001.jpg" alt="">
    </div>
</body>
</html>

© 著作权归作者所有

下一篇: 活法
林炳权
粉丝 0
博文 3
码字总数 237
作品 0
珠海
程序员
私信 提问
CSS3 3D翻转动画

图片来自网络 CSS3动画属性: transform(变换):大小、位置、颜色、变形等状态的变化 transition(过渡):初始状态过渡到结束状态这个过程中产生的动画 animation(动画):定义关键帧动画...

Neuro_annie
2017/05/18
0
0
CSS3变形详情介绍

WEB设计师借助CSS3可以轻松实现倾斜,缩放,移动及翻转元素 1.变形简介 CSS3变形时一些效果的集合,比如平移、旋转以及缩放效果,每个效果都称为变形函数(Transform Function),在CSS没有变...

TyrionJ的博客
2017/12/18
0
0
CSS3的过渡,动画,图形转换

CSS3的学习小节 迟来的CSS3学习,在CSS3中,增加了许多的新特性,像过度动画,圆角,媒体查询...等等新的特性,可以给我们开发者日常使用。 过渡 过度动画关键字【transition】 transition :...

wangly19
04/28
0
0
好程序员web前端系列之CSS3-3D

好程序员web前端系列之CSS3-3D,什么是3d的场景呢? 2d场景,在屏幕上水平和垂直的交叉线x轴和y轴 3d场景,在垂直于屏幕的方法,相对于3d多出个z轴 Z轴:靠近屏幕的方向是正向,远离屏幕的方...

好程序员IT
05/08
7
0
HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果

首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息。大家如果制作考验记忆力的连连看、扑克类的游戏神马的,甚至给女朋友写一...

lmj623565791
2014/06/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

作为一个(IT)程序员!聊天没有话题?试试这十二种技巧

首先呢?我是一名程序员,经常性和同事没话题。 因为每天都会有自己的任务要做,程序员对于其他行业来说;是相对来说比较忙的。你会经常看到程序员在发呆、调试密密麻麻代码、红色报错发呆;...

小英子wep
今天
14
0
【SpringBoot】产生背景及简介

一、SpringBoot介绍 Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程,该框架使用了特定的方式来进行配置,从而使开发人员不再需要...

zw965
今天
4
0
简述并发编程分为三个核心问题:分工、同步、互斥。

总的来说,并发编程可以总结为三个核心问题:分工、同步、互斥。 所谓分工指的是如何高效地拆解任务并分配给线程,而同步指的是线程之间如何协作,互斥则是保证同一时刻只允许一个线程访问共...

dust8080
今天
6
0
OSChina 周四乱弹 —— 当你简历注水但还是找到了工作

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @花间小酌 :#今日歌曲推荐# 分享成龙的单曲《男儿当自强》。 《男儿当自强》- 成龙 手机党少年们想听歌,请使劲儿戳(这里) @hxg2016 :刚在...

小小编辑
今天
3.3K
22
靠写代码赚钱的一些门路

作者 @mezod 译者 @josephchang10 如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。 今天给大家分享一个精彩的 GitHub 库,这个库整理...

高级农民工
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部