Common CSS styles (3)-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Common CSS styles (3)

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 15, 2016 pm 04:49 PM

1. 2D transformation

　1. transform Set or retrieve the transformation of the object

Value:

　 none: Specify a 2D transformation in the form of a six-value (a, b, c, d, e, f) transformation matrix, which is equivalent to directly applying a [a, b, c, d, e, f] Transformation matrix

translate([, ]). The first parameter corresponds to the X-axis, and the second parameter corresponds to the Y-axis. If the second parameter is not provided, the default value is 0.

TranslateX(): Specifies the translation of the X-axis (horizontal direction) of the object

　translateY(): Specify the translation of the Y-axis (vertical direction) of the object

rotate(): Specify the 2D rotation of the object. The first parameter corresponds to the X-axis, and the second parameter corresponds to the Y-axis. If the second parameter is not provided, the value of the first parameter will be taken by default

scaleX(): Specifies the (horizontal) scaling of the X-axis of the object

　scaleY(): Specifies the (vertical) scaling of the Y-axis of the object

skew( [, ]): Specify object skew transformation (oblique distortion). The first parameter corresponds to the X-axis, and the second parameter corresponds to the Y-axis. If the second parameter is not provided, the default value is 0 skewX(): Specifies the (horizontal) distortion of the object's X-axis

　skewY(): Specifies the (vertical) distortion of the Y-axis of the object

　Note: Different browsers require the following prefixes.

Kernel type	Writing
Webkit(Chrome/Safari)	-webkit-transform
Gecko(Firefox)	-moz-transform
Presto(Opera)	-o-transform
Trident(IE)	-ms-transform
W3C	transform

Example:

CSS code:

<span style="font-size: 14px;"><span style="color: #800000;">      #transform1
        </span>{<span style="color: #ff0000;">
            margin</span>:<span style="color: #0000ff;"> 0 auto</span>;<span style="color: #ff0000;">
            width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
            height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> mediumvioletred</span>;<span style="color: #ff0000;">
            -webkit-transform</span>:<span style="color: #0000ff;"> rotate(15deg)</span>;
         }</span>

Copy after login

HTML code:

<span style="font-size: 15px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="transform1"</span><span style="color: #0000ff;">></span>旋转了15度<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

Copy after login

2. transform-origin Set or retrieve the object to be transformed at a certain origin.

Value:

　: Specify coordinate values in percentage. Can be negative.

: Specify the coordinate value with the length value. Can be negative.

left: Specify the abscissa of the origin as leftcenter①: Specify the abscissa of the origin as

centerright: Specify the abscissa of the origin as

Righttop: Specify the ordinate of the origin as

topcenter②: Specify the ordinate of the origin as

centerbottom: Specify the vertical coordinate of the origin as bottom　

How to write it in different browsers:

Kernel type	Writing
Webkit(Chrome/Safari)	-webkit-transform-origin
Gecko(Firefox)	-moz-transform-origin
Presto(Opera)	-o-transform-origin
Trident(IE)	-ms-transform-origin
W3C	transform-origin

　　例子：

　　CSS代码：

<span style="font-size: 15px;"><span style="color: #800000;">        #transform1
        </span>{<span style="color: #ff0000;">
            margin</span>:<span style="color: #0000ff;"> 0 auto</span>;<span style="color: #ff0000;">
            width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
            height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> mediumvioletred</span>;<span style="color: #ff0000;">
            -webkit-transform</span>:<span style="color: #0000ff;"> rotate(15deg)</span>;/*旋转15度*/<span style="color: #ff0000;">
            -webkit-transform-origin</span>:<span style="color: #0000ff;"> left top</span>; /*以左上角为原点旋转*/
        } </span>

Copy after login

　　HTML代码：

<span style="font-size: 15px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="transform1"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

Copy after login

　　　二、过渡样式

　　　　1、transition-property 检索或设置对象中的参与过渡的属性。

　　　　取值：

　　　　all：所有可以进行过渡的css属性: none：不指定过渡的css属性; 　有过渡效果的属性：; 　　
　　例子：
　　　　CSS代码：

<span style="font-size: 15px;"><span style="color: #800000;">         #transform1
        </span>{<span style="color: #ff0000;">
            margin</span>:<span style="color: #0000ff;"> 0 auto</span>;<span style="color: #ff0000;">
            width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
            height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">
            transition-property</span>:<span style="color: #0000ff;"> background-color</span>;
            
        }<span style="color: #800000;">
        #transform1:hover
        </span>{<span style="color: #ff0000;">
            transition-duration</span>:<span style="color: #0000ff;">.5s</span>;<span style="color: #ff0000;">
            transition-timing-function</span>:<span style="color: #0000ff;">ease-in</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> yellow</span>;
        }
                </span>

Copy after login


　　　　HTML代码：

<span style="font-size: 15px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="transform1"</span><span style="color: #0000ff;">></span>请将鼠标放在上面<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

Copy after login

请将鼠标放在上面

2、transition-duration 检索或设置对象过渡的持续时间

　　　 transition-duration:time

　　　例子可参见上个例子。

　 3、transition-timing-function 检索或设置对象中过渡的动画类型。

　　　取值：

　　　linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)

ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)cubic-bezier(, , , )：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内。

　　　例子可参见上个例子。

　 4、transition-delay 设置对象延迟过渡的时间。

　　　CSS代码：

<span style="font-size: 15px;"><span style="color: #800000;">        #delay1
        </span>{<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> antiquewhite</span>;<span style="color: #ff0000;">
            width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
            height</span>:<span style="color: #0000ff;">100px</span>;                
        }<span style="color: #800000;">
        #delay1:hover
        </span>{<span style="color: #ff0000;">
            transition-delay</span>:<span style="color: #0000ff;">1s</span>;<span style="color: #ff0000;">
            transition-timing-function</span>:<span style="color: #0000ff;">ease-in</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> black</span>;
        }<span style="color: #800000;">
        #delay2
        </span>{<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> antiquewhite</span>;<span style="color: #ff0000;">
            width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
            height</span>:<span style="color: #0000ff;">100px</span>;                
        }<span style="color: #800000;">
        #delay2:hover
        </span>{<span style="color: #ff0000;">
            transition-delay</span>:<span style="color: #0000ff;">4s</span>;<span style="color: #ff0000;">
            transition-timing-function</span>:<span style="color: #0000ff;">ease-in</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> blue</span>;
        }     </span>

Copy after login

　　　HTML代码;　

<span style="font-size: 15px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="delay1"</span><span style="color: #0000ff;">><span style="color: #000000;">延迟</span></span>1s后开始过渡<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="delay2"</span><span style="color: #0000ff;">></span>延迟4s后开始过渡<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

Copy after login

延迟1s后开始过渡

延迟4s后开始过渡

***一般情况下可以将变形与过渡结合使用制作出一些特别的效果。

例：

　　CSS代码：

<span style="font-size: 15px;"><span style="color: #800000;">        #all
        </span>{<span style="color: #ff0000;">
            width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
            height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> red</span>;            
        }<span style="color: #800000;">
        #all:hover
        </span>{<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> yellow</span>;<span style="color: #ff0000;">
            transition-delay</span>:<span style="color: #0000ff;"> .5s</span>;<span style="color: #ff0000;">
            transition-timing-function</span>:<span style="color: #0000ff;"> ease-in</span>;<span style="color: #ff0000;">
            transform</span>:<span style="color: #0000ff;"> scale(1.5,1.5)</span>;<span style="color: #ff0000;">
            transition-duration</span>:<span style="color: #0000ff;"> 1s</span>;
        }   </span>

Copy after login

　　HTML代码：

<span style="font-size: 15px;"><span style="color: #0000ff;">  <</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="all"</span><span style="color: #0000ff;">></span>请把鼠标放在上面查看效果<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

Copy after login

请把鼠标放在上面查看效果

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

4 weeks ago By DDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

1 months ago By DDD

R.E.P.O. Best Graphic Settings

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

1 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7386

Java Tutorial

1630

CakePHP Tutorial

1357

Laravel Tutorial

1267

PHP Tutorial

1216

Related knowledge

What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <progress> element? Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

How do I use HTML5 form validation attributes to validate user input? Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What is the purpose of the <iframe> tag? What are the security considerations when using it? Mar 20, 2025 pm 06:05 PM

The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

What are the best practices for cross-browser compatibility in HTML5? Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

What is the viewport meta tag? Why is it important for responsive design? Mar 20, 2025 pm 05:56 PM

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

How do I use the HTML5 <time> element to represent dates and times semantically? Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

See all articles