css deformation has several properties-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

css deformation has several properties

青灯夜游

Sep 22, 2022 pm 04:45 PM

css

css transformation has 6 attributes: 1. transform, which applies 2D or 3D transformation to elements; 2. transform-origin, which allows users to change the position of the transformed element; 3. transform-style, which specifies to be nested How elements are displayed in 3D space; 4. perspective, stipulates the perspective effect of 3D elements; 5. perspective-origin, stipulates the bottom position of 3D elements; 6. backface-visibility.

css deformation has several properties

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

CSS3 transformations can move, scale, rotate, lengthen or stretch elements. The effect of a transformation is to make an element change its shape, size and position.

css transformation (transformation) property

Property	Description	CSS
transform	Apply a 2D or 3D transform to an element.	3
transform-origin	Allows you to change the position of the element being transformed.	3
transform-style	Specifies how nested elements are displayed in 3D space.	3
perspective	Specifies the perspective effect of 3D elements.	3
perspective-origin	Specifies the bottom position of the 3D element.	3
backface-visibility	Defines whether the element is visible when not facing the screen.	3

CSS3 transform attribute

Function: The transform attribute is applied to the element 2D or 3D conversion. This property allows us to rotate, scale, move or tilt the element.

Grammar:

transform: none|transform-functions;

Copy after login

Usage example

<!DOCTYPE html>
<html>
<head>
<style> 
*, *:after, *:before {
  box-sizing: border-box;
}
body {
  background: #F5F3F4;
  margin: 0;
  padding: 10px;
  font-family: &#39;Open Sans&#39;, sans-serif;
  text-align: center;
}
h2, h4 {
  font-weight: 400;
  color: #4d4d4d;
}
.card {
  display: inline-block;
  margin: 10px;
  background: #fff;
  padding: 10px;
  min-width: 180px;
  box-shadow: 0 3px 5px #ddd;
  color: #555;
}
.card .box {
  width: 60px;
  height: 60px;
  margin: auto;
  background: #ddd;
  cursor: pointer;
  box-shadow: 0 0 5px #ccc inset;
}
.card .box .fill {
  width: 60px;
  height: 60px;
  position: relative;
  background: #03A9F4;
  opacity: .5;
  box-shadow: 0 0 5px #ccc;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.card p {
  margin: 25px 0 0;
}
.rotate:hover .fill {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.rotateX:hover .fill {
  -webkit-transform: rotateX(45deg);
  transform: rotateX(45deg);
}
.rotateY:hover .fill {
  -webkit-transform: rotateY(45deg);
  transform: rotateY(45deg);
}
.rotateZ:hover .fill {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.scale:hover .fill {
  -webkit-transform: scale(2, 2);
  transform: scale(2, 2);
}
.scaleX:hover .fill {
  -webkit-transform: scaleX(2);
  transform: scaleX(2);
}
.scaleY:hover .fill {
  -webkit-transform: scaleY(2);
  transform: scaleY(2);
}
.skew:hover .fill {
  -webkit-transform: skew(45deg, 45deg);
  transform: skew(45deg, 45deg);
}
.skewX:hover .fill {
  -webkit-transform: skewX(45deg);
  transform: skewX(45deg);
}
.skewY:hover .fill {
  -webkit-transform: skewY(45deg);
  transform: skewY(45deg);
}
.translate:hover .fill {
  -webkit-transform: translate(45px, 1em);
  transform: translate(45px, 1em);
}
.translateX:hover .fill {
  -webkit-transform: translateX(45px);
  transform: translateX(45px);
}
.translateY:hover .fill {
  -webkit-transform: translateY(45px);
  transform: translateY(45px);
}
.matrix:hover .fill {
  -webkit-transform: matrix(2, 2, 0, 2, 45, 0);
  transform: matrix(2, 2, 0, 2, 45, 0);
}
</style>
</head>
<body>
<!-- Rotate-->
<div class="card">
  <div class="box rotate">
    <div class="fill"></div>
  </div>
  <p>rotate(45deg)  </p>
</div>
<div class="card">
  <div class="box rotateX">
    <div class="fill"></div>
  </div>
  <p>rotateX(45deg)</p>
</div>
<div class="card">
  <div class="box rotateY">
    <div class="fill"></div>
  </div>
  <p>rotateY(45deg)</p>
</div>
<div class="card">
  <div class="box rotateZ">
    <div class="fill"></div>
  </div>
  <p>rotateZ(45deg)  </p>
</div>
<!-- scale-->
<div class="card">
  <div class="box scale">
    <div class="fill"></div>
  </div>
  <p>scale(2)</p>
</div>
<div class="card">
  <div class="box scaleX">
    <div class="fill"></div>
  </div>
  <p>scaleX(2)    </p>
</div>
<div class="card">
  <div class="box scaleY">
    <div class="fill"></div>
  </div>
  <p>scaleY(2)    </p>
</div>
<!-- skew-->
<div class="card">
  <div class="box skew">
    <div class="fill"></div>
  </div>
  <p>skew(45deg, 45deg)  </p>
</div>
<div class="card">
  <div class="box skewX">
    <div class="fill"></div>
  </div>
  <p>skewX(45deg)</p>
</div>
<div class="card">
  <div class="box skewY">
    <div class="fill"></div>
  </div>
  <p>skewY(45deg)</p>
</div>
<!-- translate-->
<div class="card">
  <div class="box translate">
    <div class="fill"></div>
  </div>
  <p>translate(45px)  </p>
</div>
<div class="card">
  <div class="box translateX">
    <div class="fill"></div>
  </div>
  <p>translateX(45px)</p>
</div>
<div class="card">
  <div class="box translateY">
    <div class="fill"></div>
  </div>
  <p>translateY(45px)</p>
</div>
<div class="card">
  <div class="box matrix">
    <div class="fill"></div>
  </div>
  <p> matrix(2, 2, 0, 2, 45, 0)</p>
</div>
</body>
</html>

Copy after login

Rendering:

css deformation has several properties

CSS3 transform-origin attribute

Function: The transform-origin attribute allows you to change the position of the transformed element. 2D transform elements change the element's x and y axes. 3D transform elements can also change their Z-axis.

Syntax:

transform-origin: x-axis y-axis z-axis;

Copy after login

##ValueDescriptionx-axisy-axis z-axisDefines where on the Z axis the view is placed. Possible values: length

注：该属性必须与 transform 属性一同使用。

使用示例

<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 50px;
padding:10px;
border: 1px solid black;
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
}
</style>
<script>
function changeRot(value)
{
document.getElementById(&#39;div2&#39;).style.transform="rotate(" + value + "deg)";
document.getElementById(&#39;div2&#39;).style.msTransform="rotate(" + value + "deg)";
document.getElementById(&#39;div2&#39;).style.webkitTransform="rotate(" + value + "deg)";
document.getElementById(&#39;div2&#39;).style.MozTransform="rotate(" + value + "deg)";
document.getElementById(&#39;div2&#39;).style.OTransform="rotate(" + value + "deg)";
document.getElementById(&#39;persp&#39;).innerHTML=value + "deg";
}
function changeOrg()
{
var x=document.getElementById(&#39;ox&#39;).value;
var y=document.getElementById(&#39;oy&#39;).value;
document.getElementById(&#39;div2&#39;).style.transformOrigin=x + &#39;% &#39; + y + &#39;%&#39;;
document.getElementById(&#39;div2&#39;).style.msTransformOrigin=x + &#39;% &#39; + y + &#39;%&#39;;
document.getElementById(&#39;div2&#39;).style.webkitTransformOrigin=x + &#39;% &#39; + y + &#39;%&#39;;
document.getElementById(&#39;div2&#39;).style.MozTransformOrigin=x + &#39;% &#39; + y + &#39;%&#39;;
document.getElementById(&#39;div2&#39;).style.OTransformOrigin=x + &#39;% &#39; + y + &#39;%&#39;;
document.getElementById(&#39;origin&#39;).innerHTML=x + "% " + y + "%";            
}
</script>
</head>
<body>
<p>旋转红色的DIV元素，尝试更改其X轴和Y轴：</p>
<div id="div1">
  <div id="div2">HELLO</div>
</div>
Rotate:
<input type="range" min="-360" max="360" value="45" onchange="changeRot(this.value)" />
transform: rotateY:(<span id="persp">45deg</span>);
<br><br>
X-axis:<input type="range" min="-100" max="200" value="20" onchange="changeOrg()" id="ox" /><br>
Y-axis:<input type="range" min="-100" max="200" value="40" onchange="changeOrg()" id="oy" />
transform-origin: <span id="origin">20% 40%</span>;
 
</body>
</html>

Copy after login

效果图：

css deformation has several properties

CSS3 transform-style属性

作用：transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。

语法：

transform-style: flat|preserve-3d;

Copy after login

flat：子元素将不保留其 3D 位置。

preserve-3d：子元素将保留其 3D 位置。

注：该属性必须与 transform 属性一同使用。

使用示例

<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding:10px;
border: 1px solid black;
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari and Chrome */
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
}
#div3
{
padding:40px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateY(80deg);
-webkit-transform: rotateY(-60deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div1">
  <div id="div2">HELLO
  <div id="div3">YELLOW</div>
  </div>
</div>
</body>
</html>

Copy after login

效果图：

css deformation has several properties

CSS perspective属性

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

语法

perspective: number|none;

Copy after login


	Defines where on the X-axis the view is placed. Possible values: ● left ● center ● right ● length ● %
	Defines where on the Y-axis the view is placed. Possible values: ● top ● center ● bottom ● length ● %

值	描述
number	元素距离视图的距离，以像素计。
none	默认值。与 0 相同。不设置透视。

注释：perspective 属性只影响 3D 转换元素。

提示：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。

使用示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
#div1
{
	position: relative;
	height: 150px;
	width: 150px;
	margin: 50px;
	padding:10px;
	border: 1px solid black;
	perspective:150px;
	-webkit-perspective:150px; /* Safari and Chrome */
}

#div2
{
	padding:50px;
	position: absolute;
	border: 1px solid black;
	background-color: red;
	transform: rotateX(45deg);
	-webkit-transform: rotateX(45deg); /* Safari and Chrome */
}
</style>
</head>

<body>

<div id="div1">
  <div id="div2">HELLO</div>
</div>
 
</body>
</html>

Copy after login

css deformation has several properties

CSS3 perspective-origin属性

perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。

定义时的perspective -Origin属性，它是一个元素的子元素，透视图，而不是元素本身。

perspective-origin: x-axis y-axis;

Copy after login

值	描述
x-axis	定义该视图在 x 轴上的位置。默认值：50%。可能的值： left center right length %
y-axis	定义该视图在 y 轴上的位置。默认值：50%。可能的值： top center bottom length %

值

描述

x-axis

定义该视图在 x 轴上的位置。默认值：50%。

可能的值：

left
center
right
length
%

y-axis

定义该视图在 y 轴上的位置。默认值：50%。

可能的值：

top
center
bottom
length
%

使用示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
#div1
{
	position: relative;
	height: 150px;
	width: 150px;
	margin: 50px;
	padding:10px;
	border: 1px solid black;
	perspective:150;
	perspective-origin: 10% 10%;
	-webkit-perspective:150; /* Safari and Chrome */
	-webkit-perspective-origin: 10% 10%; /* Safari and Chrome */
}

#div2
{
	padding:50px;
	position: absolute;
	border: 1px solid black;
	background-color: red;
	transform: rotateX(45deg);
	-webkit-transform: rotateX(45deg); /* Safari and Chrome */
}

</style>
</head>

<body>

<div id="div1">
  <div id="div2">HELLO</div>
</div>
 
</body>
</html>

Copy after login

css deformation has several properties

CSS3 backface-visibility属性

作用：backface-visibility 属性定义当元素不面向屏幕时是否可见。如果在旋转元素不希望看到其背面时，该属性很有用。

语法：

backface-visibility: visible|hidden;

Copy after login

visible：背面是可见的。

hidden：背面是不可见的。

注：只有 Internet Explorer 10+ 和 Firefox 支持 backface-visibility 属性；Opera 15+、Safari 和 Chrome 支持需使用-webkit-backface-visibility 属性替代。

使用示例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div
{
position:relative;
height:60px;
width:60px;
border:1px solid #000;
background-color:yellow;
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg); /* Chrome and Safari */
-moz-transform:rotateY(180deg); /* Firefox */
}
#div1
{
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
}
#div2
{
-webkit-backface-visibility:visible;
-moz-backface-visibility:visible;
-ms-backface-visibility:visible;
}
</style>
</head>
<body>
<p>本例有两个 div 元素，均旋转 180 度，背向用户。</p>
<p>第一个 div 元素的 backface-visibility 属性设置为 "hidden"，所以应该是不可见的。</p>
<div id="div1">DIV 1</div>
<p>第二个 div 元素的 backface-visibility 属性设置为 "visible"，所以是可见的。</p>
<div id="div2">DIV 2</div>
<p><b>注释：</b>本例只在 Internet Explorer 10、Firefox、Chrome 以及 Safari 中有效。</p>
</body>
</html>

Copy after login

效果图：

css deformation has several properties

（学习视频分享：web前端）

The above is the detailed content of css deformation has several properties. For more information, please follow other related articles on the PHP Chinese website!

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)

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: How To Unlock Everything In MyRise

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

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?

7500

CakePHP Tutorial

1377

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

Related knowledge

How to resize bootstrap Apr 07, 2025 pm 03:18 PM

To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-

How to insert pictures on bootstrap Apr 07, 2025 pm 03:30 PM

There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.

How to use bootstrap button Apr 07, 2025 pm 03:09 PM

How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text

How to set up the framework for bootstrap Apr 07, 2025 pm 03:27 PM

To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.

How to write split lines on bootstrap Apr 07, 2025 pm 03:12 PM

There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

How to view the date of bootstrap Apr 07, 2025 pm 03:03 PM

Answer: You can use the date picker component of Bootstrap to view dates in the page. Steps: Introduce the Bootstrap framework. Create a date selector input box in HTML. Bootstrap will automatically add styles to the selector. Use JavaScript to get the selected date.

How to use bootstrap in vue Apr 07, 2025 pm 11:33 PM

Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.

See all articles